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脚本代码跑起来。
Jan 09 Javascript
jquery遍历input取得input的name
Apr 27 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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
一个多文件上传的例子(原创)
2006/10/09 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
动态表格Table类的实现
2009/08/26 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
js的toLowerCase方法用法实例
2015/01/27 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
初步解析Python中的yield函数的用法
2015/04/03 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
水果超市创业计划书
2014/01/27 职场文书
法制宣传口号
2014/06/16 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
医生辞职信范文
2015/03/02 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
详解Python flask的前后端交互
2022/03/31 Python