js实现Tab选项卡切换效果


Posted in Javascript onJuly 17, 2020

本文实例为大家分享了js实现Tab选项卡切换效果展示的具体代码,供大家参考,具体内容如下

html部分

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="tab.css">
 <script src="tab.js"></script>
 <title>Document</title>
</head>
<body>
 <div id="tab">
  <div id="tab-nav" class="tab-nav">
   <ul>
    <li class="active"><a href="#">公告</a></li>
    <li><a href="#">规则</a></li>
    <li><a href="#">论坛</a></li>
    <li><a href="#">安全</a></li>
    <li><a href="#">公益</a></li>
   </ul>
  </div>
  <div id="tab-contain">
   <div class="mod">
    <ul>
     <li><a href="#">走进无声课堂</a></li>
     <li><a href="#">淘宝之行大众评审</a></li>
     <li><a href="#">爱心品牌联合征集</a></li>
     <li><a href="#">公益机构淘宝攻略</a></li>
    </ul>
   </div>
   <div class="mod" style="display:none">
    <ul>
     <li><a href="#">[聚焦]金牌卖家再启航</a></li>
     <li><a href="#">[功能]橱柜规则升级啦</a></li>
     <li><a href="#">[话题]又爱又恨优惠券</a></li>
     <li><a href="#">[工具] 购后送店铺红包</a></li>
    </ul>
   </div>
   <div class="mod" style="display:none">
    <ul>
     <li><a href="#">张勇:要玩快乐足球</a></li>
     <li><a href="">阿里2000万驰援灾区</a></li>
     <li><a href="">旅游宝让你边玩</a></li>
     <li><a href="">多行跟进阿里信用贷款</a></li>
    </ul>
   </div>
   <div class="mod" style="display:none">
    <ul>
     <li><a href="">[通知] “泛滥换新”</a></li>
     <li><a href="">[通知]“比特币严管”</a></li>
     <li><a href="">[通知]“禁发商品”</a></li>
     <li><a href="">[通知]“商品属性”</a></li>
    </ul>
   </div>
   <div class="mod" style="display:none">
    <ul>
     <li><a href="#">走进无声课堂</a></li>
     <li><a href="#">淘宝之行大众评审</a></li>
     <li><a href="#">爱心品牌联合征集</a></li>
     <li><a href="#">公益机构淘宝攻略</a></li>
    </ul>
   </div>
  </div>
 </div>
</body>
</html>

css部分

*{
 padding:0px;
 margin:0px;
 list-style: none;
 font-size: 14px;
}
#tab{
 width:298px;
 height:120px;
 margin:10px;
 border:1px solid #eee;
 overflow: hidden;
}
.tab-nav{
 width:400px;
 position:relative;
 height:27px;

}
.tab-nav ul{
 position:absolute;
 width:301px;
 left:-1px;
 background-color: #f7f7f7;
}
.tab-nav li{
 float:left;
 width:58px;
 padding: 0 1px;
 height:36px;
 background-color: #f7f7f7;
 border-bottom: 1px solid #eee;
 text-align: center;
}
.tab-nav li.active{
 background-color: #fff;
 border-bottom-color:#fff;
 border-left: 1px solid #eee;
 border-right: 1px solid #eee;
 padding:0px;
 font-weight: bolder;
}
li a:link,li a:visited{
 text-decoration: none;
 color:#000;
}
#tab-contain .mod{
 margin:25px 6px 10px 6px;
}
#tab-contain .mod ul li{
 float: left;
 width:143px;
 height:25px;
 overflow: hidden;
}

Js部分

function $(id){
 return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
 var navs=$('tab-nav').getElementsByTagName('li');
 var divs=$('tab-contain').getElementsByTagName('div');
 // alert(divs.length);
 if(navs.length!=divs.length){
 return;
 }
 for(var i=0;i<navs.length;i++){
 navs[i].title=i;
 navs[i].onmouseover=function(){
  for(var j=0;j<navs.length;j++){
  navs[j].className="";
  divs[j].style.display="none";

  }
  this.className="active";
  divs[this.title].style.display="block";
 }
 }

}

js实现Tab选项卡切换效果

学习课程链接。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个简单的js鼠标划过切换效果
Jun 30 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 #Javascript
js注册时输入合法性验证方法
Oct 21 #Javascript
angular4实现tab栏切换的方法示例
Oct 21 #Javascript
js Dom实现换肤效果
Oct 21 #Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 #Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 #Javascript
vue做网页开场视频的实例代码
Oct 20 #Javascript
You might like
第三节--定义一个类
2006/11/16 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
php跨服务器访问方法小结
2015/05/12 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
JSON格式化输出
2014/11/10 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
在Python中使用元类的教程
2015/04/28 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python推导式的使用方法实例
2021/02/28 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
员工培训邀请函
2014/01/11 职场文书
就业表自我评价分享
2014/02/06 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
经典英文广告词
2014/03/18 职场文书
2014年工程师工作总结
2014/11/25 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang