手机游戏
经典单机
角色扮演
休闲益智
动作冒险
射击枪战
赛车竞速
模拟经营
解密闯关
策略战争
手机软件
时尚购物
体育运动
资讯阅读
教育学习
摄影摄像
生活服务
效率办公
聊天社交
视频盒子
其它软件
新闻资讯
游戏攻略
软件教程
游戏问答
软件资讯
软件技术
叨叨念念
网站技术
技术问答
软件教程
资源资料
原创作品
代码学习
网页设计
网络技术
合集
合集
游戏合集
软件合集
资讯合集
视频合集
首页 > 网页设计 > 网页设计

jQuery自动切换/点击切换选项卡

作者:星知苑 时间:2013-06-14 15:36:03

jQuery自动切换/点击切换选项卡,Tab选项卡切换很多时候在网页中经常用到,这里只是简单的介绍下Tab选项卡切换技术

这次没有用到jquery库就实现了,其实这个功能主要用于一些排行榜比较多的网页,比如博客、论坛等的热门,最新,随机做成tab选项卡,就可以显示更多的排行榜。

下面的代码演示只是用了3个,但是你可以直接添加li和li对应的div就可以添加选项卡,还有修改css这个就不用说了。

 

源码简单说明,并附上源码包:百度网盘

第一段代码是html代码:[break]

<div class="tab1" id="tab1">
	<div class="menu" id="menu">
		<ul>
			<li id="one1" onclick="setTab('one',1)">星知苑</li>
			<li id="one2" onclick="setTab('one',2)">点击看看</li>
			<li id="one3" onclick="setTab('one',3)">会自动的</li>
		</ul>
	</div>
	<div class="menudiv">
	<div id="tag_one_1">星知苑的内容</div>
	<div id="tag_one_2" style="display:none;">点击看看的内容</div>
	<div id="tag_one_3" style="display:none;">会自动的的内容</div>
	</div>
</div>

第2段代码js代码:

<script type="text/javascript">
function setTab(name,cursel){
	for(var i=1; i<=links_len; i++){
		var menu = document.getElementById(name+i);
		var menudiv = document.getElementById("tag_"+name+"_"+i);
		if(i==cursel){
			menu.className="tag_current";
			menudiv.style.display="block";
		}
		else{
			menu.className="";
			menudiv.style.display="none";
		}
	}
}
function Next(){                                                        
	cursel++;
	if (cursel>links_len)cursel=1
	setTab(name,cursel);
} 
var name='one';
var cursel=1;
var ScrollTime=2000;//循环周期(毫秒)
onload=function(){
	var links = document.getElementById("menu").getElementsByTagName('li')
	links_len=links.length;
	for(var i=0; i<links_len; i++){
		links[i].onmouseover=function(){
			clearInterval(iIntervalId);
			this.onmouseout=function(){
				iIntervalId = setInterval(Next,ScrollTime);;
			}
		}
	}
	document.getElementById("tag_"+name+"_"+links_len).parentNode.onmouseover=function(){
		clearInterval(iIntervalId);
		this.onmouseout=function(){
			iIntervalId = setInterval(Next,ScrollTime);;
		}
	}
	setTab(name,cursel);
	iIntervalId = setInterval(Next,ScrollTime);
}
</script>

第3端代码css代码:

<style type="text/css">
a {text-decoration:none;}
a:link {color:#333333;}
a:visited {color:#666666;}
a:hover {color:#FF7D00;text-decoration:none;}
a:active {color:red;text-decoration:none;}
.tab1{width:301px;border-top:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;}
.menu{width:300px;background:#eee;height:28px;border-right:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;}
.menu ul,.menudiv li{list-style:none;margin:0;padding:0;overflow:hidden}
.menu li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#A8C29F solid 1px;color:#666;font-size:14px;overflow:hidden}
.menudiv{width:299px;height:270px;border-left:#A8C29F solid 1px;border-right:#A8C29F solid 1px;border-top:0;background:#fefefe}
.menudiv div{padding:10px;line-height:28px;}
.menudiv li{text-align:left;font-size:14px;overflow:hidden}
.tag_current{background:#A8C29F;color:#fff;font-weight:bold}
</style>

效果图片:

1.jpg

在线演示:http://demo.myxzy.com/changetag/index.html

良心推荐

使命召唤手游攻略大全
非常火爆的一款枪战动作游戏,主机游戏大作打造,作为手游超多的情怀玩家们的喜爱,有很多的模式娱乐对战竞技,沉浸在那种炮火连天子弹穿梭的世界,这里是小编用了大量的时间研究摸索的一些对新手有帮助的以及很多的游戏操作技巧等攻略分享给你,让你可以更加的得心应手快速提升自己的技术。

相关资讯