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

Question

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

所以，基本上我开始学习 JQuery 并且我的任务要求我创建一个简单的选项卡表示。 My problem is that when I select a button and highlight it, the highlight should go away when another button is selected, but it doesn't.

这是 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 是更改了背景文本和文本装饰的类。 如果有人可以提供帮助，我将不胜感激。谢谢:)

Answer 1

从所有button 中删除button1 类：

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