简单纯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 相关文章推荐
JS获取页面窗口大小的代码解读
Dec 01 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
详谈js模块化规范
Jul 07 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 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
图解上海144收音机
2021/03/02 无线电
PHP4实际应用经验篇(2)
2006/10/09 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
python函数的5种参数详解
2017/02/24 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python实现远程控制电脑
2019/05/23 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
python创建学生成绩管理系统
2019/11/22 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python PIL模块的基本使用
2020/09/29 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
数学专业推荐信范文
2013/11/21 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
婚纱店策划方案
2014/05/22 职场文书
品牌转让协议书
2014/08/20 职场文书
求职信格式范文
2015/03/19 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
Python装饰器的练习题
2021/11/23 Python