HTML文件
$(function(){var $div_li =$("div.tab_menu ul li");$div_li.click(function(){$(this).addClass("selected") //當前<li>元素高亮.siblings().removeClass("selected"); //去掉其它同輩<li>元素的高亮var index = $div_li.index(this); // 獲取當前點擊的<li>元素 在 全部li元素中的索引。$("div.tab_box > div") //選取子節點。不選取子節點的話，會引起錯誤。如果里面還有div.eq(index).show() //顯示 <li>元素對應的<div>元素.siblings().hide(); //隱藏其它幾個同輩的<div>元素}).hover(function(){ $(this).addClass("hover");},function(){$(this).removeClass("hover"); })})<div class="tab"><div class="tab_menu"><ul><li class="selected">時事</li><li>體育</li><li>娛樂</li></ul></div><div class="tab_box"><div>時事</div><div class="hide">體育</div><div class="hide">娛樂</div></div> </div>

css? 文件

*{ margin:0; padding:0;}body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}.tab { width:240px;margin:50px;}.tab_menu { clear:both;}.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}.tab_menu li.hover { background:#DFDFDF;}.tab_menu li.selected { color:#FFF; background:#6D84B4;}.tab_box { clear:both; border:1px solid #898989; height:100px;}.hide{display:none}

?

?

轉載于:https://www.cnblogs.com/timelesszhuang/p/3679784.html

總結

以上是生活随笔為你收集整理的jquery 选项卡实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。