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实用技巧(一)
Aug 16 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
原生JS轮播图插件
Feb 09 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
vue-loader教程介绍
2017/06/14 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
python 实现视频 图像帧提取
2019/12/10 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
python sleep和wait对比总结
2021/02/03 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
师范生实习自我鉴定
2013/11/01 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
讲解MySQL增删改操作
2022/05/06 MySQL