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>

我想弄清楚的是我如何使用任何赋予span类的选项卡名称来触发显示或隐藏的内容，如

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

JS根本不是我的领域，但是看一下我猜它与var $ info和var $ name有关的初始脚本，但是我没有足够的理解来弄清楚如何在排序中使用它们如果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();

在$（文档）.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

-maxdepth 1是$tab.text()范围内显示的内容，因此是标签的“名称”。

您可以编写这样的代码（在“激活”处理程序中）：

tabName

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

1 个答案: