单击时隐藏/显示选项卡文本

Question

我有一组标签。我想始终显示每个选项卡的字形，但 show/hide 它们的文本取决于是否选择了特定选项卡。我已经设法通过 jquery 脚本获得了我想要的功能，但感觉这是一种非常复杂的实现方式，而且非常非常错误！

在我的脚本中，每次单击一个选项卡时，我都会 "unhide" 所选选项卡的文本并隐藏所有其他选项卡的文本。在下面的示例中（有两个选项卡）看起来并没有那么糟糕，但是当包含更多选项卡时它是可怕的。

请问有没有更简单的方法？我在示例中包含了 JSFiddle。我的代码如下：

HTML:

<div class="col-md-12 column">
<ul class="nav nav-tabs">
    <li><a id="btn-tab1" data-toggle="tab" href="#section-one"><i class="glyphicon glyphicon-paperclip"></i><i id="tab1-text" style="display: none"> Tab 1 Name</i></a>

    </li>
    <li><a id="btn-tab2" data-toggle="tab" href="#section-two"><i class="glyphicon glyphicon-education"></i><i id="tab2-text" style="display: none"> Tab 2 Name</i></a>

    </li>
</ul>

jQuery:

    $(document).ready(function () {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            if ($("#btn-tab1").attr('aria-expanded') == 'true') {
                $("#tab1-text").show();
                $("#tab2-text").hide();
            } else if ($("#btn-tab2").attr('aria-expanded') == 'true') {
                $("#tab2-text").show();
                $("#tab1-text").hide();
            }
        })
    });

Answer 1

为了改进函数的使用，最好引用元素本身而不是总是使用 id 属性。试试这个：

$(document).ready(function () {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('a[data-toggle="tab"]').find('.glyphicon').next().hide();
    $(this).find('i').show();
  })
});

单击时隐藏/显示选项卡文本

Hide / Show Tab text on click

css

jquery

tabs

onclick

twitter-bootstrap

FiddleDemo