首页猿问 jquery隐藏未使用的选项卡

jquery隐藏未使用的选项卡

JavaScript

江户川乱折腾 2023-07-06 15:09:53

我正在创建一个模板，供同事在带有垂直选项卡的所见即所得编辑器（我是一名老师）中使用，以便他们可以轻松地向每个选项卡添加内容。因为他们使用 WYSIWYG 编辑器，所以我不希望他们必须处理任何 HTML 代码。我想添加比模板所需更多的选项卡，然后隐藏仅将“选项卡名称”作为选项卡中文本的任何选项卡。这样学生只会看到其中包含内容的选项卡。列表组的 HTML 代码是 <div class="container"> <div class="row"> <div class="col-3"> <div class="list-group flex-md-column text-center" id="tablist" role="tablist"> <a class="list-group-item list-group-item-action active" data-toggle="tab" role="tab">Tab 1</a> <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 2</a> <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 3</a> <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 4</a> <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 5</a> <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 6</a> <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 7</a> <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 8</a> <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 9</a> <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab Name</a> </div> </div> </div> </div>我们将非常感谢您的建议。

查看完整描述

1 回答

慕村225694

TA贡献1880条经验获得超4个赞

只是jquery：

$("a[data-toggle=tab]").each(function(){ ($(this).text() === 'Tab Name') ? $(this).hide() : $(this).show()});

演示版

完整的html：

<html>

<body>

</div>

function hideme() {

$("a[data-toggle=tab]").each(function(){ ($(this).text() === 'Tab Name') ? $(this).hide() : $(this).show()});

};

function showme() {

$("a[data-toggle=tab]").each(function(){ $(this).show() });

};

</script>

</body>

</html>

反对回复 2023-07-06

1 回答
0 关注
134 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

jquery隐藏未使用的选项卡

jquery隐藏未使用的选项卡

1 回答

添加回答