完美实现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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 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实现的功能是显示8条基色色带
2006/10/09 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
介绍Python中的一些高级编程技巧
2015/04/02 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
python实现自动登录后台管理系统
2018/10/18 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
金融专业应届生求职信
2013/11/02 职场文书
商超业务员岗位职责
2014/03/12 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
老干部工作汇报材料
2014/10/28 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS