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

Question

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

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

您能否告知是否有更简单的方法？我在示例中包含了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();
  })
});

FiddleDemo