原生js简单的Tab选项卡切换支持多个静态选项卡切换代码



107 427 143



特效描述:Tab选项卡切换 多个选项卡 静态选项卡 选项卡切换,同一个HTML页面可同时出现几个Tab切换

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script src="js/tabqh.js"></script>

3. HTML代码

<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;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料转换......</a></li>
		</ul>
	</div>
	<div id="tabcontent2" name="divNumber" class="tabdiv hiddendiv">
		<ul>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料转换......</a></li>
		</ul>
	</div>
	<div id="tabcontent3" name="divNumber" class="tabdiv  hiddendiv">
		<ul>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料转换......</a></li>
		</ul>
	</div>
	<div id="tabcontent4" name="divNumber" class="tabdiv hiddendiv">
		<ul>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料转换......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料转换......</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;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料转换......</a></li>
		</ul>
	</div>
	<div id="tabContenth2" name="divNumberh" class="tabdiv hiddendiv">
		<ul>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料转换......</a></li>
		</ul>
	</div>
	<div id="tabContenth3" name="divNumberh" class="tabdiv hiddendiv">
		<ul>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型......</a></li>
			<li><span style="float: right;">[2012-06-12]</span><a href="#">创新型热电材料转换效率创世界纪录创新型热电材料转换......</a></li>
		</ul>
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到