當另一個按鈕被點擊時JQuery取消選擇按鈕

Question

我是新來堆棧溢出，我已經在這個網站上搜索其他答案。我發現了一些類似的問題，但問題是使用了其他預製標籤，並且我對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> 

在我的CSS，我有按鈕，普通按鈕，而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'); 
});