<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width:440px; border:1px solid #000000; margin: 100px auto; padding: 10px; } .hd{ overflow: hidden; } .hd span{ float: left; margin-right: 10px; width: 100px; height: 30px; background-color: #ccc; } .hd span.current{ background-color: deeppink; } .bd div{ width: 440px; height: 300px; background-color: deeppink; display: none; } </style> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script> $(function () { $('.hd span').mouseenter(function () { //sibling兄弟，siblings兄弟們 //被鼠標經過的哪一個屬性變爲current，其他的class爲空 $(this).attr('class','current').siblings().attr('class',''); //選擇符合元素索引號的那個顯示出來，其他兄弟們隱藏 $('.bd div').eq($(this).index()).show().siblings().hide(); }) }) </script> </head> <body> <div class="box"> <div class="hd"> <span class="current">新聞</span> <span>體育</span> <span>娛樂</span> <span>財經</span> </div> <div class="bd"> <div style="display: block">新聞</div> <div>體育</div> <div>娛樂</div> <div>財經</div> </div> </div> </body> </html>
jQuery Tab欄切換
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
PIC18 bootloader之RS485 bootloader
瞭解更多關於bootloader 的C語言實現，請加我Q扣: 1273623966 （驗證信息請填 bootloader）,歡迎諮詢或定製bootloader（在線升級程序）。
windows下如何將拖拽文件位置從複製變成剪切-按住shift鍵再操作
經常碰到這種情況，我們需要把一個文件從A位置轉移到B位置。 但是單純的拖拽只會複製相關文件，沒有辦法直接做到位置修改轉移的效果。 搜索了一下，發現shift按住之後再進行就可以改複製爲剪切了。