在同一个页面设置两个选项卡菜单滑动式导航

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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(//ku.shouce.ren/files/images/201601/56a31f205dafe.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(//ku.shouce.ren/files/images/201601/56a31f212212c.jpg) no-repeat left bottom;}
.tabqh .menu li a.tabactive{color:#ffffff;font-weight:bold;background:url(//ku.shouce.ren/files/images/201601/56a31f22e1980.jpg) no-repeat left bottom;}
.tabqh .tabdiv ul{list-style:none;}
.tabqh .tabdiv ul li{height:24px;line-height:24px;overflow:hidden;background:url(//ku.shouce.ren/files/images/201601/56a31f23a3fce.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(//ku.shouce.ren/files/images/201601/56a31f2422dd9.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(//ku.shouce.ren/files/images/201601/56a31f24da49f.jpg) no-repeat left bottom;}
.tabqh2 .menu li a.tabactive{color:#268bdd;font-weight:bold;height:27px;background:url(//ku.shouce.ren/files/images/201601/56a31f259e181.jpg) no-repeat left bottom;}
.tabqh2 .tabdiv ul{list-style:none;}
.tabqh2 .tabdiv ul li{height:24px;line-height:24px;overflow:hidden;background:url(//ku.shouce.ren/files/images/201601/56a31f23a3fce.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);" onmouseover="showThis(1,'divNumber','tabcontent','tablink');" class="tabactive" id="tablink1">最新公告</a></li>
			<li><a href="javascript:void(0);" onmouseover="showThis(2,'divNumber','tabcontent','tablink');" id="tablink2">行业新闻</a></li>
			<li><a href="javascript:void(0);" onmouseover="showThis(3,'divNumber','tabcontent','tablink');" id="tablink3">产业聚焦</a></li>
			<li><a href="javascript:void(0);" onmouseover="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);" onmouseover="showThis(1,'divNumberh','tabContenth','tablinkh');" class="tabactive" id="tablinkh1">会员单位</a></li>
			<li><a href="javascript:void(0);" onmouseover="showThis(2,'divNumberh','tabContenth','tablinkh');" id="tablinkh2">网站会员</a></li>
			<li><a href="javascript:void(0);" onmouseover="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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

在同一个页面设置两个选项卡菜单滑动式导航

分类

网站常用

描述

JS实现同一个页面两个滑动门选项菜单功能，原生JavaScript Tab滑动菜单切换，同个页面支持多个静态选项卡，鼠标移上任意一个滑动门菜单的上部，下边的内容都会切换。两个滑动门导航互不影响，各成一体，你还可以把其中一个修改成点...