tab切換-jquery
阿新 • • 發佈:2019-01-25
- style.css 檔案
*{ margin: 0; padding: 0; list-style: none; font-size: 12px; box-sizing:inherit; } .notice{ width:298px; height: 98px; margin: 10px; border: 1px solid #eee; overflow: hidden; } .notice-tit{ height: 27px; position: relative; background: #F7F7F7; } ul{ margin-bottom: 0px; } .netice-tit ul{ position: absolute; width: 301px; left: -1px; } .notice-tit li{ float: left; width: 57px; height: 26px; line-height: 26px; text-align: center; overflow: hidden; background: #FFF; background: #F7F7F7; padding: 0 1px; border-bottom: 1px solid #eee; } .notice-tit li.select{ background:#FFF; border-bottom-color:#FFF; border-left:1px solid #eee; border-right: 1px solid #eee; padding: 0 0; width: 60px; font-weight: bolder; } .notice li a:link,.notice li a:visited{text-decoration: none; color: #000;} .notice li a:hover{color: #F90;} .notice-con .mod{margin:10px 10px 10px 19px;} .notice-con .mod ul li{ float: left; width: 134px; height: 25px; overflow: hidden; }
- html頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切換</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link type="text/css" rel="stylesheet" href="css/style.css"> <style> </style> </head> <body> <div id="notice" class="notice"> <div id="notice-tit" class="notice-tit"> <ul> <li><a href="#">公告 </a></li> <li><a href="#">規則 </a></li> <li><a href="#">論壇 </a></li> <li><a href="#">安全 </a></li> <li class="select"><a href="#">公益 </a></li> </ul> </div> <div id="notice-con" class="notice-con" > <div class="mod" style="display: none"> <ul> <li><span>【<a href="">通知</a>】</span><a href="#">22</a></li> <li><span>【<a href="">通知</a>】</span><a href="#">22</a></li> <li><span>【<a href="">通知</a>】</span><a href="#">22</a></li> <li><span>【<a href="">通知</a>】</span><a href="#">22</a></li> </ul> </div> <div class="mod" style="display: none"> <ul> <li><span>【<a href="">通知</a>】</span><a href="#">333</a></li> <li><span>【<a href="">通知</a>】</span><a href="#">333</a></li> <li><span>【<a href="">通知</a>】</span><a href="#">333</a></li> <li><span>【<a href="">通知</a>】</span><a href="#">333</a></li> </ul> </div> <div class="mod" style="display: none"> <ul> <li><span>【<a href="">聚焦</a>】</span><a href="#">444</a></li> <li><span>【<a href="">視訊</a>】</span><a href="#">333</a></li> <li><span>【<a href="">測試</a>】</span><a href="#">333</a></li> <li><span>【<a href="">通知</a>】</span><a href="#">333</a></li> </ul> </div> <div class="mod" style="display: none"> <ul> <li><span>【<a href="">畫畫</a>】</span><a href="#">444</a></li> <li><span>【<a href="">小孩</a>】</span><a href="#">333</a></li> <li><span>【<a href="">遊戲</a>】</span><a href="#">333</a></li> <li><span>【<a href="">女人</a>】</span><a href="#">333</a></li> </ul> </div> <div class="mod" style="display: block;"> <ul> <li><a href="#">個人重要資訊要管勞!</a></li> <li><a href="#">賣家防範紅包欺詐提醒</a></li> <li><a href="#">跟換收貨地址的陷阱!</a></li> <li><a href="#">注意騙子的技術升級了!</a></li> </ul> </div> </div> </div> <script src="js/jquery.min.js"></script> <!-- <script src="js/script.js"></script> --> <script src="js/bootstrap.js"></script> <script> $(function(){ $(".notice-tit ul li ").mouseenter(function() { var idx=$(this).index(); /*alert(idx);*/ $(".notice-con div").eq(idx).show().siblings('div').hide().removeClass("select"); $(".notice-tit ul li ").eq(idx).addClass("select").siblings('li').removeClass("select"); }); }); </script> </body> </html>
注意需要引入jquery。