标签式、tab选项卡式竖直菜单代码，点击切换

发布时间：2018-09-24 09:19:01 所属栏目：政策来源：站长网

导读：平时，我们见到的菜单导航大多数是横向的，今天来瞧一个比较特殊的，这个菜单是纵向的，也就是竖直菜单，其特点为是：标签式、tab选项卡式，当我们用鼠标点击时，菜单选项切换！示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http

　　平时，我们见到的菜单导航大多数是横向的，今天来瞧一个比较特殊的，这个菜单是纵向的，也就是竖直菜单，其特点为是：标签式、tab选项卡式，当我们用鼠标点击时，菜单选项切换！

　　示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>竖向tab滑门菜单JS代码</title> <style> .tab_box{ width:995px; margin:20px auto;} .lyz_tab_left{ background:url(/uploads/allimg/1109/left3.jpg) no-repeat top right; float: left; width: 259px; height: auto !important; min-height:500px; height:500px;} .pro_con1111{ float: left; overflow: hidden; width: 249px; height: auto;} .pro_con111 UL{ padding: 0px; width: 259px; list-style-type: none;} .pro_con111 UL LI{ padding-right: 30px; display: inline; font-weight: bold; font-size: 14px; background: url(/uploads/allimg/1109/hongbj.jpg) no-repeat left center; float: left; margin-bottom: 5px; width: 219px; cursor: pointer; color: #fff; line-height: 34px; height: 34px; text-align: right;} .pro_con111 UL LI.hover{ padding-right: 30px; display: inline; font-weight: bold; font-size: 14px; background: url(/uploads/allimg/1109/baibj.jpg) no-repeat right 50%; float: left; margin-bottom: 5px; width: 229px; cursor: pointer; color: #3c3c3c; line-height: 34px; height: 34px; text-align: right;} .lyz_tab_right{ padding-right: 10px; display: inline; padding-left: 20px; background: url(/uploads/allimg/1109/right4.jpg) no-repeat left top; float: left; padding-bottom: 20px; width: 675px; padding-top: 20px; height:500px;} .clear{ clear:both} </style> </head>  <div class="tab_box"> <div class="lyz_tab_left"> <div class="pro_con111"> <ul> <li class="hover" id="one1" onclick="setTab('one',1,5)">公司简介</li> <li id="one2" onclick="setTab('one',2,5)">服务理念 </li> <li id="one3" onclick="setTab('one',3,5)">服务流程</li> <li id="one4" onclick="setTab('one',4,5)">服务标准</li> <li id="one5" onclick="setTab('one',5,5)">服务资质</li> </ul> </div> <script language="javascript">  </script> </div> <div class="lyz_tab_right"> <div class="hover" id="con_one_1">公司简介内容</div> <div class="hover" id="con_one_2" style="display: none">服务理念内容</div> <div class="hover" id="con_one_3" style="display: none">服务流程内容</div> <div class="hover" id="con_one_4" style="display: none">服务标准内容</div> <div class="hover" id="con_one_5" style="display: none">服务资质内容</div> </div> <div class="clear"></div>  </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：云计算网_泰州站长网）

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