js实现点击切换TAB标签实例


Posted in Javascript onAugust 21, 2015

本文实例讲述了js实现点击切换TAB标签。分享给大家供大家参考。具体如下:

这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上。

先来看看运行效果截图:

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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript两段代码,两个小技巧
Feb 04 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 #Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 #Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 #Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 #Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 #Javascript
js实现温度计时间样式代码分享
Aug 21 #Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 #Javascript
You might like
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
jQuery 解析xml文件
2009/08/09 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
在Python中编写数据库模块的教程
2015/04/29 Python
Python修改MP3文件的方法
2015/06/15 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
对python生成业务报表的实例详解
2019/02/03 Python
python障碍式期权定价公式
2019/07/19 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
工程师自我评价怎么写
2013/09/19 职场文书
车间副主任岗位职责
2013/12/24 职场文书
公司授权委托书范本
2014/04/03 职场文书
启动仪式策划方案
2014/06/14 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
大学生逃课检讨书
2015/05/04 职场文书
合理化建议书范文
2015/09/14 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL