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

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

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

以下是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>

自定义选项卡
开放式启动
连接
Pin应用程序
表1文本
表2文本
表3文本

在我的CSS中，我将button作为普通按钮，而button1是更改了背景文本和文本装饰的类。

---

如果有人能帮忙，我将不胜感激。谢谢：）

从所有

按钮中删除
按钮1
类：

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

我支持这个答案-比我快几秒钟发布：）谢谢你们，你们发布的解决方案很有效。我简直不敢相信这是这么简单：）为什么不在点击一个项目时，为所有的项目添加.removeClass（'button1'），然后添加.addClass（'button1'）。