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

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

良心推荐

高效办公软件推荐
  • 千米app
  • 雅清达APP
  • 飞书文档网页版
  • 金山文档免费下载
  • 互助文档下载
  • 文件夹管家app
作为打工人无疑就是可以在工作完成之后可以尽情的享受不用工作的休闲时间,但是往往都是事与愿违的很多的事情,有效的提高办公的效率才是唯一的王道不只是要有着自己的办公的方式还需要有一个很好的软件来帮助你,简单的用法直接让你的工作效率是更加的高赶紧来下载吧这有着很多的可以帮助到你升职加薪的。

相关资讯