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

发布时间：2018-08-20 12:27:46 所属栏目：创业来源：站长网

导读：这是基于 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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如