完美实现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 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
jQuery原生的动画效果
Jul 10 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
谈谈JS中的!!
Dec 07 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 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制作图型计数器的例子
2006/10/09 PHP
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php 文章调用类代码
2011/08/11 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
vue axios用法教程详解
2017/07/23 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
Python中强大的命令行库click入门教程
2016/12/26 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python MD5加密的示例
2020/10/19 Python
Python descriptor(描述符)的实现
2020/11/15 Python
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
老师自我鉴定范文
2013/12/25 职场文书
师德师风承诺书
2014/05/23 职场文书
优秀班主任材料
2014/12/16 职场文书
保研推荐信格式
2015/03/25 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书