Tab标签式的菜单,点击切换,基于jQuery

发布时间：2018-08-24 13:33:04 所属栏目：政策来源：站长网

导读：这是基于 jQuery 写的菜单，由于作者审美观不太好，所以菜单很丑，大家不要介意，但是我们向他的作品表示感谢，尤其新手一定要好好学习一下哦。 TAB标签，类似IE7以上版本的标签效果，当鼠标点击后才会切换到该菜单，而不是滑动门。演示效果：网页版：点

　　这是基于jQuery写的菜单，由于作者审美观不太好，所以菜单很丑，大家不要介意，但是我们向他的作品表示感谢，尤其新手一定要好好学习一下哦。

　　TAB标签，类似IE7以上版本的标签效果，当鼠标点击后才会切换到该菜单，而不是滑动门。

　　演示效果：

　　网页版：点击这里

　　运行版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href=http://www.veryhuo.com/ > <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现的TAB标签式二级菜单 - Liehuo.Net</title> <script type="text/javascript" src="/uploads/common/js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(function(){ $("#container .menu1 ul li").click(function(){ var index=$("#container .menu1 ul li").index(this); $(this).addClass("bg").siblings().removeClass(); $("#container .menu2 ul li ul").eq(index).show().parent().siblings("li").children("ul").hide(); }) }) </script> <style type="text/css"> body{ margin:0; padding:0; font-family:"宋体"; font-size:9pt; color:#FFFFFF; font-weight:bold} #container{ width:800px; height:auto; margin:0 auto; border:1px #1025c0 solid} #container .menu1{ width:800px; height:40px; border:none; background:url(/uploads/allimg/1006/jq_menu1.gif) no-repeat} #container .menu1 ul{ margin:0; padding:0; position:relative; padding-top:5px;} #container .menu1 ul li{ float:left; padding-left:10px; height:35px; width:80px; line-height:35px; list-style:none; text-align:center; cursor:pointer} #container .menu2{ width:800px; height:35px; border:none; background-color:#333333;} #container .menu2 ul{ margin:0; padding:0} #container .menu2 ul li{ height:35px; line-height:35px; list-style:none; float:left; cursor:pointer} #container .menu2 ul li ul li{ float:left; padding-left:20px; height:35px; line-height:35px; list-style:none} .bg{ background-color:#333333} .hide{ display:none} </style> </head> <body> <div id="container"> <div class="menu1"> <ul> <li class="bg">第一栏</li> <li>第二栏</li> <li>第三栏</li> <li>第四栏</li> <li>第五栏</li> </ul> </div> <div class="menu2"> <ul> <li> <ul> <li>第一栏</li><li>第一栏</li><li>第一栏</li> </ul> </li> <li> <ul class="hide"> <li>第二栏</li><li>第二栏</li><li>第二栏</li> </ul> </li> <li> <ul class="hide"> <li>第三栏</li><li>第三栏</li><li>第三栏</li> </ul> </li> <li> <ul class="hide"> <li>第四栏</li><li>第四栏</li><li>第四栏</li> </ul> </li> <li> <ul class="hide"> <li>第五栏</li><li>第五栏</li><li>第五栏</li> </ul> </li> </ul> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：清远站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!