完美实现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事件冒泡
Jul 17 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 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 实例化类的一点摘记
2008/03/23 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP序列化操作方法分析
2016/09/28 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
Python正则表达式介绍
2012/08/06 Python
Python3多线程操作简单示例
2018/05/22 Python
python实现五子棋小游戏
2020/03/25 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
python代码xml转txt实例
2020/03/10 Python
python中的列表和元组区别分析
2020/12/30 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
医学院四年学习生活的自我评价
2013/11/06 职场文书
2014年会策划方案
2014/05/11 职场文书
中职生自荐信范文
2014/06/15 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Python基础之常用库常用方法整理
2021/04/30 Python