先上圖（本篇涉及html、css、jQuery）
效果如上，如果是前端小白，或許這篇文章很適合你，每個重要的地方我都會添加注釋解釋清楚
首先，頁面當然是html碼起來的嘍，整體是一個div框，上面的標簽部分采用ul和li標簽實現，內容部分就是簡單的table。
tab切換效果
- 公告規則論壇安全公益
！上面需要注意到li標簽的id屬性值和與標題對應的內容部分的class屬性值
至于css部分，關鍵的就是規則那個li標簽里面的selected，還有在內容部分的div中出現的disappear和appear
這三個代碼很少，但是作用很大
//讓當前內容部分消失.disappear{display: none;}//讓當前內容顯示出來.appear{display: block;}//更改標題的顏色.box.selected{background-color:#fff;}
接下來就是關鍵的js代碼了
/**
* author: hkk;
*
*/(function(){//還記得前面提到的li標簽里面的role屬性嗎，這里通過這個role獲取jQuery對象//由于多個li標簽的role值相同，這里可以理解為這個對象被這些li標簽共有var$tab = $("li[role=tab-title]");//給這個對象綁定事件，mouseover表示當鼠標經過時會被觸發$tab.on('mouseover',function(event){var$this= $(this);//獲取當前鼠標經過位置的li標簽的對象showContent($this);//自己寫的方法，用于顯示對應的內容，傳入參數為當前li標簽的對象showBac($this);//自己寫的方法，用于更改當前選擇的li標簽的背景色var$siblings = $this.siblings();//jQuery中的方法，用于獲取與當前對象在同級關系的同輩元素的集合//jQuery中的each方法，用于遍歷上面的集合$siblings.each(function(index,el){var$el = $(el);//index是索引，而這個el就是我們所需的同輩元素，在這里得到它的jQuery對象varid = $el.attr("id");//獲取該對象的id屬性值removeBac(id);//自己寫的方法，用于移除該li標簽對應的內容removeContent($el);//自己寫的方法，用于移除該li標簽的背景色});? ? });//該方法時根據傳入的li標簽的對象，判斷它的class中是否含有selected這個值，有的話直接移除//在css部分提到過，這個值是設置選中標簽的背景色functionremoveBac($item){if($item.hasClass("selected")) {? ? ? ? ? ? $item.removeClass("selected");? ? ? ? }? ? }//這個方法時根據傳入的li標簽對象，給它的class中添加selected這個值functionshowBac($item){? ? ? ? $item.addClass("selected");? ? }//根據傳入的id值，通過類選擇器來獲取li標簽對于內容的div對象//雖然這個id值是li標簽的id值，但是剛好是和它對應的內容部分的div的class屬性值相同functionremoveContent(id){var$item = $("."+ id);//前面css部分提到過，appear是讓內容顯示出來，disappear是讓內容消失//由于剛開始會有默認選擇項，所以在內容部分div的class中會含有disappear或者appear//這個方法時為了移除內容，所以如果該div中含有appear就移除這個值if($item.hasClass("appear")) {? ? ? ? ? ? $item.removeClass("appear");? ? ? ? }? ? ? ? $item.addClass("disappear");? ? }//和上面移除內容的方法剛好相反functionshowContent(id){var$item = $("."+ id);if($item.hasClass("disappear")) {? ? ? ? ? ? $item.removeClass("disappear");? ? ? ? }? ? ? ? $item.addClass("appear");? ? }})();
思想都在注釋中，目前學前端也不久，如果有錯誤還望各位大俠指出來，如果比我還小白的話，看不明白的直接提出哈。點擊鏈接加入群【前端交流總群③】：https://jq.qq.com/?_wv=1027&k=47luD4u
