javascript - 单击特定选项卡时触发现有 jscript 的显示/隐藏

Question

我在包含选项卡式输出的 php 页面中有以下脚本

<script>
$(document).ready(function () {
    $('#horizontalTab').ProductTabs({
        type: 'default', //Types: default, vertical, accordion           
        width: 'auto', //auto or any width like 600px
        fit: true,   // 100% fit in a container
        closed: 'accordion', // Start closed if in accordion view
        activate: function(event) { // Callback function if tab is switched
            var $tab = $(this);
            var $info = $('#tabInfo');
            var $name = $('span', $info);
            $name.text($tab.text());
            $info.show();
        }
    });
});
</script>

如果我将以下代码放入 html 中，它会告诉我当前打开的选项卡的名称

<div id="tabInfo">
    Selected tab: <span class="tabName"></span>
</div>

我想要弄清楚的是如何使用为跨度类提供选项卡名称的任何内容来触发显示或隐藏，例如

$('.pricefields td').hide();

JS 根本不是我的领域，但看看最初的脚本，我猜测它与 var $info 和 var $name 相关，但我没有足够的理解来弄清楚如何在排序中使用它们if tabName == Tab1 然后隐藏这个 td 方式。

我确实尝试将以下内容添加到脚本中，但 td 仍然显示在所有选项卡上。如果我添加 $('.pricefields td').hide();没有 if 语句它会隐藏，所以我知道 hide 命令使用了正确的标识符。

if ($info === 'Product Information'){
$('.pricefields td').hide();
}

任何建议表示赞赏。

根据 smarx 的回答，我更新了代码，但又遇到了另一个我没有考虑到的问题。

代码现在如下所示(我已保留真实世界的选项卡名称):

$(document).ready(function () {
$('#horizontalTab').ProductTabs({
type: 'default', //Types: default, vertical, accordion           
width: 'auto', //auto or any width like 600px
fit: true,   // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
if ($tab.text() === 'Product Information') {
$('.pricefields td').hide();
$('.productinfo td').show();
}
if ($tab.text() === 'Product Prices') {
$('.pricefields td').show();
$('.productinfo td').hide();
}
}
});
});

我现在遇到的问题是，在页面加载时，价格字段 td 仍然可见，因为除非有人单击“产品信息”选项卡触发激活功能事件，否则不会触发隐藏。鉴于在首页加载时这是打开的选项卡，他们不会立即单击它。 然后我决定我可以添加

$('.pricefields td').hide();

在 $(document).ready(function () 之后，它以某种方式起作用。如果用户在另一个选项卡上刷新页面，则页面会在他们打开的任何选项卡上重新加载，但仍然隐藏价格字段。因此，如果他们碰巧在价格选项卡上，他们什么也看不到。

我想解决方案是在页面加载时检查当前事件的选项卡，并触发 .hide() 的第一个实例，后续触发器由原始激活处理。

这有意义吗？

选项卡的 html 标记非常简单。

<div id="horizontalTab">
<ul class="resp-tabs-list">
<li>Product Information</li>      
<li>Product Prices</li>
<li>Product Meta Data</li>  
</ul>

<div class="resp-tabs-container">
<div>
Product info tab content
</div>
<div>
Product price tab content
</div>
<div>
Product meta tab content
</div>

</div>
</div>

Answer 1

$tab.text() 是显示在 tabName 范围中的内容，因此这就是选项卡的“名称”。

您可以编写如下代码(在“activate”处理程序内):

if ($tab.text() === 'Tab1') {
    $('.pricefields td').hide();
}