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 13 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
JavaScript严格模式详解
Nov 18 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
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框架Phpbean说明
2008/01/10 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
MSN消息提示类
2006/09/05 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python 七种邮件内容发送方法实例
2014/04/22 Python
python制作小说爬虫实录
2017/08/14 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
python检索特定内容的文本文件实例
2018/06/05 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
银行实习自我鉴定
2013/10/12 职场文书
社区端午节活动总结
2015/02/11 职场文书
销售人员管理制度
2015/08/06 职场文书
致运动员的广播稿
2015/08/19 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers
Java 写一个简单的图书管理系统
2022/04/26 Java/Android