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 相关文章推荐
javascript标签在页面中的位置探讨
Apr 11 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
JS实现吸顶特效
Jan 08 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
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
php中hashtable实现示例分享
2014/02/13 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
python tkinter canvas使用实例
2019/11/04 Python
python变量的作用域是什么
2020/05/26 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
华为慧通面试题
2012/09/11 面试题
学生请假条格式
2014/04/11 职场文书
社会实践评语
2014/04/28 职场文书
推普周活动总结
2014/08/28 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
Python初识逻辑与if语句及用法大全
2021/08/07 Python
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL