首页 > 代码库 > 在同一个页面设置两个选项卡菜单 滑动式导航
在同一个页面设置两个选项卡菜单 滑动式导航
<!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><title>唐山塑钢门窗</title><style>@charset "utf-8";body{font-family:Arial, Helvetica, sans-serif;font-size:11px;}*{margin:0;padding:0;}/* tab1 */.tabqh{height:180px;margin:30px auto;position:relative;width:450px;}.tabqh .menu{height:32px;width:450px;background:url(/jscss/demoimg/201404/qhbg.jpg) no-repeat left center;}.tabqh .menu ul{margin:0px;padding:0px;height:26px;list-style:none;text-align:center;}.tabqh .menu li{display:block;float:left;height:26px;line-height:26px;margin-right:4px;margin-top:5px;width:96px;}.tabqh .menu li a{color:#000000;font-size:14px;text-decoration:none;display:block;background:url(/jscss/demoimg/201404/unhovbg.jpg) no-repeat left bottom;}.tabqh .menu li a.tabactive{color:#ffffff;font-weight:bold;background:url(/jscss/demoimg/201404/hovbg.jpg) no-repeat left bottom;}.tabqh .tabdiv ul{list-style:none;}.tabqh .tabdiv ul li{height:24px;line-height:24px;overflow:hidden;background:url(/jscss/demoimg/201404/linarr.jpg) no-repeat left center;text-indent:15px;}.tabqh .tabdiv ul li a{text-decoration:none;color:#000000;}.tabqh .tabdiv ul li a:hover{color:#ff0000;}.tabqh .tabfirstli{margin-left:8px;}.tabqh .tabdiv{font-size:12px;height:128px;padding:10px;position:absolute;text-align:left;top:32px;width:428px;border:1px solid #A9CBF0;border-top:none;}/* tab2 */.tabqh2{height:180px;margin:30px auto;position:relative;width:480px;}.tabqh2 .menu{height:32px;width:480px;background:url(/jscss/demoimg/201404/qhbg2.jpg) no-repeat left center;}.tabqh2 .menu ul{margin:0px;padding:0px;height:26px;list-style:none;text-align:center;}.tabqh2 .menu li{display:block;float:left;height:26px;line-height:26px;margin-right:4px;margin-top:5px;width:107px;}.tabqh2 .menu li a{color:#000000;font-size:14px;text-decoration:none;display:block;background:url(/jscss/demoimg/201404/unhovbg2.jpg) no-repeat left bottom;}.tabqh2 .menu li a.tabactive{color:#268bdd;font-weight:bold;height:27px;background:url(/jscss/demoimg/201404/hovbg2.jpg) no-repeat left bottom;}.tabqh2 .tabdiv ul{list-style:none;}.tabqh2 .tabdiv ul li{height:24px;line-height:24px;overflow:hidden;background:url(/jscss/demoimg/201404/linarr.jpg) no-repeat left center;text-indent:15px;}.tabqh2 .tabdiv ul li a{text-decoration:none;color:#000000;}.tabqh2 .tabdiv ul li a:hover{color:#ff0000;}.tabqh2 .tabfirstli{margin-left:8px;}.tabqh2 .tabdiv{font-size:12px;height:128px;padding:10px;position:absolute;text-align:left;top:32px;width:458px;border:1px solid #A9CBF0;border-top:none;}</style><script>function hasClass(obj, cls) { return obj.className.match(new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘));}function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls;}function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘); obj.className = obj.className.replace(reg, ‘ ‘); }}function showThis(number, divName, divID,aID) { var tarArr = document.getElementsByTagName("div"); var count = 0; for (var i = 0; i < tarArr.length; i++) { if (tarArr[i].getAttribute("name") != null) { if (tarArr[i].getAttribute("name") == divName) { count++; } } } //将所有的name=divNumber的div都加上hiddendiv for (var j = 1; j <= count; j++) { var divEle = document.getElementById(divID + j); if (!hasClass(divEle, "hiddendiv")) { addClass(divEle, "hiddendiv"); } var tabA = document.getElementById(aID+j); if(hasClass(tabA,"tabactive")) {removeClass(tabA,"tabactive");} } //给当前的div移除hiddendiv var divThis = document.getElementById(divID + number); removeClass(divThis, "hiddendiv"); var AThis=document.getElementById(aID+number); addClass(AThis,"tabactive");}</script><style type="text/css">.hiddendiv{display: none;}</style></head><body><div class="tabqh"> <div class="menu"> <ul> <li class="tabfirstli"><a href="javascript:void(0);" onm ouseover="showThis(1,‘divNumber‘,‘tabcontent‘,‘tablink‘);" class="tabactive" id="tablink1">最新公告</a></li> <li><a href="javascript:void(0);" onm ouseover="showThis(2,‘divNumber‘,‘tabcontent‘,‘tablink‘);" id="tablink2">行业新闻</a></li> <li><a href="javascript:void(0);" onm ouseover="showThis(3,‘divNumber‘,‘tabcontent‘,‘tablink‘);" id="tablink3">产业聚焦</a></li> <li><a href="javascript:void(0);" onm ouseover="showThis(4,‘divNumber‘,‘tabcontent‘,‘tablink‘);" id="tablink4">创新成果</a></li> </ul> </div> <div id="tabcontent1" name="divNumber" class="tabdiv"> <ul> <li><span style="float: right;">[2014-05-12]</span><a href="#">源代码下载,书籍教程,技术文章,网页特效,素材模板,编程资源</a></li> <li><span style="float: right;">[2014-04-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料......</a></li> <li><span style="float: right;">[2014-03-12]</span><a href="#">源代码下载,书籍教程,技术文章,网页特效,素材模板,编程资源</a></li> <li><span style="float: right;">[2014-02-12]</span><a href="#">MP3剪切助手2.1.1_手机铃声截取软件</a></li> <li><span style="float: right;">[2014-01-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料转换......</a></li> </ul> </div> <div id="tabcontent2" name="divNumber" class="tabdiv hiddendiv"> <ul> <li><span style="float: right;">[2014-07-12]</span><a href="#">MP3剪切助手2.1.1_手机铃声截取软件</a></li> <li><span style="float: right;">[2014-03-12]</span><a href="#">源代码下载,书籍教程,技术文章,网页特效,素材模板,编程资源</a></li> <li><span style="float: right;">[2014-06-22]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">MP3剪切助手2.1.1_手机铃声截取软件</a></li> <li><span style="float: right;">[2014-06-02]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料转换......</a></li> </ul> </div> <div id="tabcontent3" name="divNumber" class="tabdiv hiddendiv"> <ul> <li><span style="float: right;">[2014-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li> <li><span style="float: right;">[2014-03-12]</span><a href="#">C#,Java,VB,Delphi,VC++等编程源码下载</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">源代码下载,书籍教程,技术文章,网页特效,素材模板,编程资源</a></li> <li><span style="float: right;">[2014-03-12]</span><a href="#">MP3剪切助手2.1.1_手机铃声截取软件</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">C#,Java,VB,Delphi,VC++等编程源码下载</a></li> </ul> </div> <div id="tabcontent4" name="divNumber" class="tabdiv hiddendiv"> <ul> <li><span style="float: right;">[2014-01-12]</span><a href="#">C#,Java,VB,Delphi,VC++等编程源码下载</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">源代码下载,书籍教程,技术文章,网页特效,素材模板,编程资源</a></li> <li><span style="float: right;">[2014-02-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">源代码下载,书籍教程,技术文章,网页特效,素材模板,编程资源</a></li> <li><span style="float: right;">[2014-07-12]</span><a href="#">C#,Java,VB,Delphi,VC++等编程源码下载</a></li> </ul> </div></div><div class="tabqh2"> <div class="menu"> <ul> <li class="tabfirstli"><a href="javascript:void(0);" onm ouseover="showThis(1,‘divNumberh‘,‘tabContenth‘,‘tablinkh‘);" class="tabactive" id="tablinkh1">会员单位</a></li> <li><a href="javascript:void(0);" onm ouseover="showThis(2,‘divNumberh‘,‘tabContenth‘,‘tablinkh‘);" id="tablinkh2">网站会员</a></li> <li><a href="javascript:void(0);" onm ouseover="showThis(3,‘divNumberh‘,‘tabContenth‘,‘tablinkh‘);" id="tablinkh3">科研机构</a></li> </ul> </div> <div id="tabContenth1" name="divNumberh" class="tabdiv"> <ul> <li><span style="float: right;">[2014-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电......</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">C#,Java,VB,Delphi,VC++等编程源码下载</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">源代码下载,书籍教程,技术文章,网页特效,素材模板,编程资源</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">MP3剪切助手2.1.1_手机铃声截取软件</a></li> </ul> </div> <div id="tabContenth2" name="divNumberh" class="tabdiv hiddendiv"> <ul> <li><span style="float: right;">[2014-06-12]</span><a href="#">MP3剪切助手2.1.1_手机铃声截取软件</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料......</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">C#,Java,VB,Delphi,VC++等编程源码下载</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型......</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">源代码下载,书籍教程,技术文章,网页特效,素材模板,编程资源</a></li> </ul> </div> <div id="tabContenth3" name="divNumberh" class="tabdiv hiddendiv"> <ul> <li><span style="float: right;">[2014-06-12]</span><a href="#">MP3剪切助手2.1.1_手机铃声截取软件</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">C#,Java,VB,Delphi,VC++等编程源码下载</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">源代码下载,书籍教程,技术文章,网页特效,素材模板,编程资源</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">C#,Java,VB,Delphi,VC++等编程源码下载</a></li> <li><span style="float: right;">[2014-06-12]</span><a href="#">MP3剪切助手2.1.1_手机铃声截取软件</a></li> </ul> </div></div></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。