完美实现js选项卡切换效果(一)


Posted in Javascript onMarch 08, 2017

本文实例为大家分享了js选项卡切换的具体代码,可以手动切换,另设置定时器可使其自动切换,供大家参考,具体内容如下

效果如图:

完美实现js选项卡切换效果(一)

具体代码:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<style type="text/css">
 *{
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: "微软雅黑";
  color: #000000;
  text-decoration: none;
  list-style-type: none;
 }
 #tab-list{
  width: 275px;
  height: 190px;
  margin: 30px auto;
 }
 #list{
  height: 32px;
  border-bottom: #8B4513 2px solid;
 }
 #list li{
  display: inline-block;
  width: 60px;
  border: 1px solid #999999;
  border-bottom: none;
  line-height: 30px;
  margin-left: 5px;
  text-align: center;
  cursor: pointer;
 }
 #list .active{
  border-top: 2px solid #8B4513;
  border-bottom: 2px solid #fff;
 }
 #tab-list div{
  border: 1px solid #7396B8;
  border-top: none;
 }
 #tab-list div li{
  height: 30px;
  line-height: 30px;
  text-indent: 8px;
 }
 #tab-list .show{
  display: block;
 }
 #tab-list .hidden{
  display: none;
 }

</style>
<script type="text/javascript">
 window.onload=function(){
  var tab=document.getElementById('tab-list');
  var list=document.getElementById('list').getElementsByTagName('li');
  var div=tab.getElementsByTagName('div');
  var timer=null;
  var index=0;
  for(var i=0;i<list.length;i++){
   list[i].num=i;
   list[i].onmouseover=function(){
    Change(this.num);
   }
  }
  function Change(curIndex){
   for(var i=0;i<list.length;i++){
    list[i].className="";
    div[i].className="hidden";
   }
   list[curIndex].className="active";
   div[curIndex].className="show";
   index=curIndex;
  }
  //自动播放
  function autoPlay(){
   timer=setInterval(function(){
    index++;
    if(index > list.length - 1){
     index=0;
    }
    Change(index);
   },2000);
  }
  autoPlay();
  tab.onmouseover=function(){
   clearInterval(timer);
  }
  tab.onmouseout=function(){
   autoPlay();
  }
 }
</script>
<body>
<div id="tab-list">
 <ul id="list">
  <li class="active">房产</li><li>家居</li><li>二手房</li>
 </ul>
 <div class="show">
  <ul>
   <li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
   <li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
   <li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
   <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
  </ul>
 </div>
 <div class="hidden">
  <ul>
   <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
   <li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
   <li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
   <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
  </ul>
 </div>
 <div class="hidden">
  <ul>
   <li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
   <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
   <li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
   <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
  </ul>
 </div>
</div>

</body>
</html>

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript !!的作用
Dec 04 Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 #Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 #Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 #Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 #Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 #Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 #Javascript
教你用十行node.js代码读取docx的文本
Mar 08 #Javascript
You might like
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
重新认识php array_merge函数
2014/08/31 PHP
10个简化PHP开发的工具
2014/12/25 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
js简单时间比较的方法
2016/08/02 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
如何利用Python识别图片中的文字
2020/05/31 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
优纳科技软件测试面试题
2012/05/15 面试题
学期自我评价
2014/01/27 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
会计简历自我评价
2015/03/10 职场文书
员工年度工作总结2015
2015/05/18 职场文书
工作简报怎么写
2015/07/21 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
Nginx的gzip相关介绍
2022/05/11 Servers