Jq實現簡單的選項卡功能
- 2019 年 12 月 27 日
- 筆記
下面我們使用Jquery實現簡單的選項卡效果，以下為示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul,li{ padding: 0; margin: 0; } .content{ width: 380px; } .content #div0,#div1,#div2{ border:solid 2px pink; } #div0 ul,#div1 ul,#div2 ul{ padding: 10px 30 10px 30px; } .content #ul1{ list-style: none; overflow: hidden; height: 38px; line-height: 38px; } #ul1 li{ width: 80px; height: 38px; line-height: 38px; text-align: center; float: left; cursor: pointer; } .cur{ background: red; color: white } </style> </head> <body> <div class="content"> <ul id="ul1"> <li class="cur">國內</li> <li>國際</li> <li>體育</li> </ul> <div id="div0"> <ul> <li><a href="">【國內】標題一</a></li> <li><a href="">【國內】標題二</a></li> </ul> </div> <div id="div1" style="display: none;"> <ul> <li><a href="">【國際】標題一</a></li> <li><a href="">【國際】標題二</a></li> </ul> </div> <div id="div2" style="display: none;"> <ul> <li><a href="">【體育】標題一</a></li> <li><a href="">【體育】標題二</a></li> </ul> </div> </div> <script src="jquery.min.js"></script> <script> $(function(){ $("#ul1 li").each(function(index){ $(this).mouseenter(function(){ $("#div0,#div1,#div2").hide(); $("#div"+index).show(); $("#ul1 li").removeClass("cur"); $(this).addClass("cur"); }); }) }); </script> </body> </html>
