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();
  })
});

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

1 个答案:

FiddleDemo