猿问

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>

我们将非常感谢您的建议。


江户川乱折腾
浏览 135回答 1
1回答

慕村225694

只是jquery：$("a[data-toggle=tab]").each(function(){&nbsp;($(this).text()&nbsp;===&nbsp;'Tab&nbsp;Name')&nbsp;?&nbsp;$(this).hide()&nbsp;:&nbsp;$(this).show()});演示版完整的html：<html><head><script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script></head><body>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="list-group flex-md-column text-center" id="tablist" role="tablist">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="list-group-item list-group-item-action active" data-toggle="tab" role="tab">Tab 1</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 2</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 3</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 4</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 5</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 6</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 7</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 8</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab 9</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="list-group-item list-group-item-action" data-toggle="tab" role="tab">Tab Name</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<script>&nbsp; &nbsp; &nbsp;function hideme() {&nbsp; &nbsp; &nbsp; &nbsp;$("a[data-toggle=tab]").each(function(){ ($(this).text() === 'Tab Name') ? $(this).hide() : $(this).show()});&nbsp; &nbsp; &nbsp;};&nbsp; &nbsp; &nbsp;function showme() {&nbsp; &nbsp; &nbsp; &nbsp;$("a[data-toggle=tab]").each(function(){ $(this).show() });&nbsp; &nbsp; &nbsp;};&nbsp; &nbsp; &nbsp;</script>&nbsp; &nbsp; &nbsp;<input type=button onclick="hideme()" value="HIDE"/>&nbsp; &nbsp; &nbsp;<input type=button onclick="showme()" value="SHOW"/></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答