Question

我有一个包含标签的Div。现在根据我的要求，我想突出选择选项卡上的标签。我希望以前的选项卡在选择新标签时取消选中，但这里没有发生..

这是我的HTML和Jquery ..

    <div style="background:lightgray;">
        <div style="margin-left:auto; margin-right:auto; width:960px;">
            <ul id="dropdown_nav">
                <li><a id="tab1" class="first" href="#" style="font-family: Candara,Trebuchet MS,sans-serif; font-size: 12px; font-weight: bold;">Intro</a></li>
                <li><a id="tab2" class="first" href="#" style="font-family: Candara,Trebuchet MS,sans-serif; font-size: 12px; font-weight: bold;">TEAMS</a></li>

            </ul>
        </div>
    </div>

           $("#tab1").click(function () {

                //to highlight
                $(this).toggleClass('selected');

            });
            $("#tab2").click(function () {

                 //to highlight
                $(this).toggleClass('selected');

            });

这是CSS ..

       .selected
        {
          background:#00a1e4;
          color: white;
        }

现在，一旦我选择tab2，我希望tab1显示原始而不突出显示。

谢谢..

Answer 1

解决问题的方法，

$("#tab1").click(function () {
    $('.first.selected').removeClass('selected');  //clear previous selected
    $(this).toggleClass('selected');               //to highlight

});
$("#tab2").click(function () {
    $('.first.selected').removeClass('selected');  //clear previous selected
    $(this).toggleClass('selected');                       //to highlight

});

查看您的标记，下面是一个更好的解决方案，因为在每个ID上编写标签点击处理程序会导致重定义代码。

$(".first").click(function () {
    $('.first.selected').removeClass('selected');  //clear previous selected
    $(this).toggleClass('selected');               //to highlight

});

Answer 2

尝试，

var tabs = $(".first");

tabs.click(function () {
  tabs.removeClass('selected').filter(this).addClass('selected')
});

DEMO

Answer 3

你的jquery 你可以通过使用类

来做到这一点

$(".first").on('click',function () {

                $('.first').removeClass('selected');
                $(this).toggleClass('selected');

            });

Demo

Answer 4

Demo

jquery的

$('ul').on('click', 'a', function () {
    var aElement = $('ul > li > a');
    aElement.removeClass("selected");
    $(this).addClass("selected");
    return false;
});

如何在选择新选项卡时取消选择以前选择的选项卡

4 个答案:

DEMO