简单纯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 Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
基于JavaScript实现瀑布流布局
Aug 15 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
原生js实现日期选择插件
May 21 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
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
php生成短域名函数
2015/03/23 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
基于Python的PIL库学习详解
2019/05/10 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
经济与贸易专业应届生求职信
2013/11/19 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
消防安全宣传标语
2014/06/07 职场文书
会计主管岗位职责
2015/04/02 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
Python使用openpyxl模块处理Excel文件
2022/06/05 Python