单击时隐藏/显示标签文本

debugcn 发表于 Dev

克里斯塔基斯·斯基尼斯（Christakis Schinis）

我有一组标签。我想始终为每个选项卡显示字形，但根据是否选择了特定的选项卡来显示/隐藏它们的文本。我已经设法通过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();
            }
        })
    });

丹尼

为了更好地使用函数，最好是引用元素本身而不是始终使用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();
  })
});