jquery 隐藏未使用的标签

Question

我正在创建一个模板，供同事在 WYSIWYG 编辑器（我是一名教师）中使用，带有垂直选项卡，以便他们可以轻松地向每个选项卡添加内容。因为他们使用的是 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>

我们将不胜感激。

Answer 1

只是 jquery:

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

DEMO

完整 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>

jquery 隐藏未使用的标签

jquery to make unused tabs hidden

html

javascript

jquery

wai-aria

twitter-bootstrap