先上图（本篇涉及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
