简单纯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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
深入理解js promise chain
May 05 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 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记录日志的实现代码
2011/08/08 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
8个必备的PHP功能开发
2015/10/02 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
vue组件学习教程
2017/09/09 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
室内设计专业个人的自我评价
2013/10/19 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
golang定时器
2022/04/14 Golang
js判断两个数组相等的5种方法
2022/05/06 Javascript
Java 多线程并发FutureTask
2022/06/28 Java/Android
python数字图像处理实现图像的形变与缩放
2022/06/28 Python