完美实现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 面向对象编程(2) 定义类
May 18 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
js创建对象的方式总结
Jan 10 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
vue实现菜单切换功能
May 08 Javascript
浅谈javascript错误处理
Aug 11 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
一个颜色轮换的简单例子
2006/10/09 PHP
php中文验证码实现方法
2015/06/18 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
node和vue实现商城用户地址模块
2018/12/05 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
多个应用共存的Django配置方法
2018/05/30 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
django如何自己创建一个中间件
2019/07/24 Python
Django框架 querySet功能解析
2019/09/04 Python
postman传递当前时间戳实例详解
2019/09/14 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
英文自荐信
2013/12/15 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
饭店工作计划书
2014/01/10 职场文书
双十佳事迹材料
2014/01/29 职场文书
医院保洁服务方案
2014/06/11 职场文书
社区创先争优承诺书
2014/08/30 职场文书
上班离岗检讨书
2014/09/10 职场文书
2015年老干部工作总结
2015/04/23 职场文书