简单纯js实现点击切换TAB标签实例


Posted in Javascript onAugust 23, 2015

一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用。
默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果

使用方法:

1、将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可
相关链接:几行简单的jQuery代码搞定tab标签切换效果

展示效果图:

简单纯js实现点击切换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知识制作网页特效有所帮助。

Javascript 相关文章推荐
javascript内存管理详细解析
Nov 11 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 #Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 #Javascript
微信JSSDK上传图片
Aug 23 #Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 #Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 #Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 #Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 #Javascript
You might like
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Python datetime模块的使用示例
2021/02/02 Python
北京某公司的.net笔试题
2014/03/20 面试题
清明节网上祭英烈活动总结
2014/04/30 职场文书
总经理检讨书
2014/09/15 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
国庆阅兵观后感
2015/06/15 职场文书
Python语言中的数据类型-序列
2022/02/24 Python