简单纯js实现点击切换TAB标签实例
更新时间：2015年08月23日 15:28:33 投稿：mrr
选项卡效果代码，无jq,JS来实现，灰色风格，没有怎么美化，或许看上去比较普通，不过兼容性和操作起来挺舒服的，风格适用于大部分的网站，或许你会用得上。
一个不需要jQuery实现的tab选项卡切换效果，代码简洁易用。
默认是鼠标悬停显示tab效果，可将其中的onmouseover 修改为 onclick 点击效果
使用方法：
1、将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可
相关链接：几行简单的jQuery代码搞定tab标签切换效果
展示效果图：
<!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 type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.tab1{width:401px;border-top:#cccccc solid 1px;border-bottom:#cccccc solid 1px;margin:50px auto 0 auto;}
.menu{height:28px;border-right:#cccccc solid 1px;}
.menu li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#cccccc solid 1px;color:#666;font-size:14px;overflow:hidden;background:#E0E2EB;}
.menu li.off{background:#FFFFFF;color:#336699;font-weight:bold;}
.menudiv{height:200px;border-left:#cccccc solid 1px;border-right:#cccccc solid 1px;border-top:0;background:#fefefe}
.menudiv div{padding:15px;line-height:28px;}
</style>
<script type="text/javascript">
function setTab(name,cursel){
cursel_0=cursel;
for(var i=1; i<=links_len; i++){
var menu = document.getElementById(name+i);
var menudiv = document.getElementById("con_"+name+"_"+i);
if(i==cursel){
menu.className="off";
menudiv.style.display="block";
}
else{
menu.className="";
menudiv.style.display="none";
}
}
}
function Next(){
cursel_0++;
if (cursel_0>links_len)cursel_0=1
setTab(name_0,cursel_0);
}
var name_0='one';
var cursel_0=1;
var ScrollTime=3000;//循环周期（毫秒）
var links_len,iIntervalId;
onload=function(){
var links = document.getElementById("tab1").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("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
clearInterval(iIntervalId);
this.onmouseout=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
setTab(name_0,cursel_0);
iIntervalId = setInterval(Next,ScrollTime);
}
</script>
</head>
<body>
<div class="tab1" id="tab1">
<div class="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>
<li id="one4" onclick="setTab('one',4)">我的网站</li>
</ul>
</div>
<div class="menudiv">
<div id="con_one_1">我的网站</div>
<div id="con_one_2" style="display:none;">JS代码,导航菜单</div>
<div id="con_one_3" style="display:none;">看到效果了吗？？？</div>
<div id="con_one_4" style="display:none;">我的网站我做主</div>
</div>
</div>
<div style="text-align:center;clear:both;"></div>
</body>
</html>
以上内容就是本文使用简单纯js实现点击切换TAB标签实例，希望对大家学习js知识制作网页特效有所帮助。
相关文章
这篇文章主要给大家介绍了关于ES6的循环与可迭代对象的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
JavaScript中基本数据类型和引用数据类型是如何存储的呢？下面通过本文给大家分享js数据类型的存储方法，需要的朋友参考下吧2017-08-08
理解javascript中的Function.prototype.bind的方法
这篇文章主要介绍了理解javascript中的Function.prototype.bind的方法,具有一定参考价值，有兴趣的可以了解一下。2017-02-02
用JavaScript修改网页样式2008-04-04
TypeScript 中内置了很多工具类型，我们无需导入，可以直接使用。 其中的很多都是比较常用的，接下来我们根据使用范围来一一介绍，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-03-03
这篇文章主要介绍了使用apifm-wxapi快速开发小程序过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
阻止mousemove鼠标移动或touchmove触摸移动触发click点击事件
这篇文章主要为大家介绍了阻止mousemove或touchmove与click事件同时触发技巧，一个按钮绑定了多个事件，所以就要想办法阻止 mouse 鼠标事件或 touch 触摸事件 与 click 事件同时触发，不然每次拖拽按钮后都会触发 click 事件，这显然是不友好的2023-06-06
这篇文章主要介绍了微信小程序解除10个请求并发限制，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了js实现仿百度汽车频道选择汽车图片展示,实例分析了javascript鼠标事件操作css样式的技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
JavaScript中如何校验一个URL？最近遇到几次需要校验URL的,所以本文给大家整理一下几个校验URL的方法,文中有详细的代码讲解和图文参考,具有一定的参考价值,需要的朋友可以参考下2023-12-12
最新评论