首页 > 代码库 > 选项卡
选项卡
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul li{ list-style: none; } .bigbox >li { width:auto; position: relative; } .bigbox >li >ul{ display: none; position: absolute; left: 100px; top:0px; } .bigbox >li >ul >li >ul{ display: none; position:absolute; left: 100px; top: 0; } </style> </head> <body> <ul class="bigbox"> <li> <a href="#">daohang-01</a> <ul> <li> <a href="#">neirong1</a> <ul> <li>neirong2</li> </ul> </li> </ul> </li> <li> <a href="#">daohang-02</a> <ul> <li> <a href="#">neirong2</a> <ul> <li>neirong22</li> </ul> </li> </ul> </li> <li> <a href="#">daohang-03</a> <ul> <li> <a href="#">neirong3</a> <ul> <li>neirong33</li> </ul> </li> </ul> </li> </ul> </body> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ $(‘.bigbox >li >a‘).click(function(){ $(this).siblings(‘ul‘).show(); $(this).parent(‘li‘).siblings().children(‘ul‘).hide(); }); $(".bigbox >li >ul >li >a ").click(function(){ var box=$(‘.bigbox >li >ul>li >ul‘); $(box).hide(); $(this).siblings(‘ul‘).show(); }); }) </script> </html>
选项卡
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。