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>
