当前位置：首页 > 网页特效 > 表格图层 >

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

时间：2014-04-21 08:36 来源：互联网作者：源码搜藏收藏推荐

<!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(http://www.codefans.net/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(http://www.codefans.net/jscss/demoimg/201404/unhovbg.jpg) no-repeat left bottom;}
.tabqh .menu li a.tabactive{color:#ffffff;font-weight:bold;background:url(http://www.codefans.net/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(http://www.codefans.net/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(http://www.codefans.net/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(http://www.codefans.net/jscss/demoimg/201404/unhovbg2.jpg) no-repeat left bottom;}
.tabqh2 .menu li a.tabactive{color:#268bdd;font-weight:bold;height:27px;background:url(http://www.codefans.net/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(http://www.codefans.net/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);" 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>

网页特效

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

表格图层下载排行

最新文章

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