JQuery 单击另一个按钮时取消选择按钮

Question

我是 stack overflow 的新手，我已经在此站点上搜索过其他答案。我发现了类似的东西，但问题是使用其他预制选项卡和我对 JQuery 的有限了解无法帮助我根据另一个问题找到解决方案。

所以，基本上我开始学习 JQuery，我的作业要求我创建一个简单的选项卡表示。我的问题是，当我 select 一个按钮并突出显示它时，当另一个按钮被 select 编辑时，突出显示应该消失，但它没有。

这是 JQuery 代码：

    $(document).ready(function() { 
        $(".tab").hide();
        $("[id=1]").show();
        $("#switcher .button").click(function(){                
            var a = $(this).attr("title");
            $(".tab").hide();
            $("[id="+a+"]").show();
            $("[val="+a+"]").addClass("button1");
        }); 
        $("[val="+a+"]").addClass('button');
    });

这是HTML：

<div class="tabs">
  <div id="switcher" class="switcher">
    <div class="label"><i>Custom tab</i></div>
    <div val="1" title="1" class="button">Open Start</div>
    <div val="2" title="2" class="button">Connect</div>
    <div val="3" title="3" class="button">Pin apps</div>
  </div>
  <div id="1" class="tab">Tab1 text</div>
  <div id="2" class="tab">Tab2 text</div>
  <div id="3" class="tab">Tab3 text</div>
</div>

在我的 CSS 中，我将 button 作为普通按钮，而 button1 是更改了背景文本和文本装饰的 class。如果有人可以提供帮助，我将不胜感激。谢谢:)

Answer 1

从所有 button 中删除 button1 class:

$(document).ready(function() { 
    $(".tab").hide();
    $("[id=1]").show();
    $("#switcher .button").click(function(){                
        var a = $(this).attr("title");
        $(".tab").hide();
        $("[id="+a+"]").show();
        $('.button').removeClass('button1'); //Add this line.
        $("[val="+a+"]").addClass("button1");
    }); 
    $("[val="+a+"]").addClass('button');
});

JQuery 单击另一个按钮时取消选择按钮

JQuery unselect button when another button is clicked

jquery

tabs

highlight