用JQuery動態爲選中元素添加/刪除類

      在作一些tab頁功能時，咱們常常會見到以下樣式：

   
       

     

      即當選中一個元素時，在此元素下會添加相應的類，以示區別。今天就研究了一下如何用JQuery實現此效果。

1. HTML代碼

<a id="med_specialist_1" name="med-specialist" class="med-active">專家門診1</a>
<a id="med_specialist_2" name="med-specialist">專家門診2</a>

2. JS代碼

//js實現給選中的元素動態添加類  思路：寫好要加的類，點擊元素時，先移除全部，而後爲當前元素添加此類
$(function(){
    $('a[name=med-specialist]').on('click', function() {
        $('.med-active').removeClass('med-active');
        $(this).addClass('med-active');
    })
});

 

      總結：先寫好你要添加的類的css代碼，並給其中一個元素加上此類，當作默認選中元素。給這些元素給相同的name，用於選中此類元素。寫點擊事件，當點擊此類元素時，先將樣式移除，而後給當前選中的元素添加樣式。

      還有一個例子，就是用複選框的樣式實現單選功能。能夠用css直接去畫，將圓形變成方形，可是css功底要比較紮實。如下代碼用js實現。

//js實現用複選框的樣式實現單選框的效果
$(function(){
    var box = document.getElementsByName('med-reg-10-cb');
    for(var i=0;i<box.length;i++) {
        box[i].onclick=function(){
            for(var i=0;i<box.length;i++){
                box[i].checked = false;
            }
            this.checked = true;
        }
    }
});

      頁面的html代碼就不放了，就是寫幾個input，type爲checkbox，把name都寫成js裏要獲得的就好了。上例中，就是把name都寫成'med-reg-10-cb'。