jquery隐藏未使用的选项卡
我正在创建一个模板，供同事在带有垂直选项卡的所见即所得编辑器（我是一名老师）中使用，以便他们可以轻松地向每个选项卡添加内容。因为他们使用 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
只是jquery：$("a[data-toggle=tab]").each(function(){ ($(this).text() === 'Tab Name') ? $(this).hide() : $(this).show()});演示版完整的html：<html><head><script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script></head><body> <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> <script> 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> <input type=button onclick="hideme()" value="HIDE"/> <input type=button onclick="showme()" value="SHOW"/></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript