jquery中常見的標題內容之間的切換

昨天在作後臺組的一個小功能的時候遇到的，很基礎，可是也很經常使用，記下來你們一塊兒學習。

好比，須要的是這樣子的一個功能，以下圖：

最上面一行的的標題和側面的標題都是能夠互相切換的。這個效果很常見，在瀏覽網頁的時候。

首先咱們先說下標題之間的切換，完了以後再說標題和內容一塊兒切換。。

我給最上面那排的每個標題統一的類名是top,而後將點擊事後呈現的樣式寫在了.hover裏面。

用jquery操做：

$('.top').click(function(){

　　$('.top').removeClass('hover');

　　$(this).addClass('hover');

})

就這樣子就OK啦~你能夠切換啦！

下面說說標題的內容之間的切換，這是有不少種方法能夠實現的，不過對於鍾愛jquery的我來講，仍是用它實現啦~

首先在結構中給標題和內容加上相應的屬性~好比我給上面的每個top標題加上了tab,這樣子12345依次排開~

而後給相對應的內容加上相對應的屬性，好比rel,或者你喜歡其餘的均可以~you choose ！you like！

不過有點我仍是須要強調下哈！標題對應的內容屬性值最好是寫成同樣的哈~

爲了方便你們看明白，我介紹下個人結構，我上面的每一個標題class="top"，而後我給它們依次加了tab="1"  tab="2"  tab="3"...

內容我所有都是class="con"，而後我給它們加了rel,依次固然就是rel="1"  rel="2"  rel="3"....

多的不說，直接上代碼：

註釋下方便理解哈~

算了，代碼貼出來算了：

$('.hr_right').delegate('.top','click',function(){          //綁定事件
　　var own_tab = $(this).attr('tab');                      //獲取標題的tab屬性值
　　select(own_tab);　　　　　　　　　　　　　　　　//執行select函數
});
function select(own_tab){　　　　　　　　　　　　　//將上面獲取的屬性值看成參數傳進來
　　var tab = own_tab;　　　　　　　　　　　　　　　　
　　$('.con').hide();　　　　　　　　　　　　　　　　//將全部的內容區域隱藏起來
　　$('.con[rel='+tab+']').show();　　　　　　　　  //讓rel的值和tab的值相等的con顯示出來

}

好啦~這樣就大功告成啦~！

發現一個問題了木有~jquery有種逆向的思想呢，不知道描述的夠不夠準確，可是我是這樣子想的呢，好比你想要達到點擊當前元素以後，當前元素變成一個特殊的顏色，同級的其餘全部元素變成另外一種顏色，那麼當你添加點擊事件以後，通常人想到的是先給當前元素加上你想要的顏色的類名， 而後再去掉同級的元素的類名，但是呢，若是你真的這樣子作了的話，是達不到想要的那種效果的！

正確的思路是：先去掉全部元素以後要顯示的那個樣式的類名，而後在給當前點擊的元素添加要顯示的樣式的類名！標題和對應的內容顯示也是同樣的道理，先將全部的內容隱藏，而後再顯示相對的內容~

QQ：503147874   歡迎交流~