完美实现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 相关文章推荐
jquery对元素拖动排序示例
Jan 16 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
详解redux异步操作实践
Aug 15 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
Laravel5中contracts详解
2015/03/02 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
Vue自定义事件(详解)
2017/08/19 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python之django母板页面的使用
2018/07/03 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
pycham查看程序执行的时间方法
2018/11/29 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
奥利奥广告词
2014/03/20 职场文书
篝火晚会主持词
2014/03/25 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
通知格式
2015/04/27 职场文书