js实现Tab选项卡切换效果
更新时间：2020年07月17日 15:41:14 作者：数星星的咚咚咚
这篇文章主要为大家详细介绍了js实现Tab选项卡切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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";
}
}
}
学习课程链接。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
身份证号码验证-支持新的带x身份证2008-08-08
在Web开发中,拖拽排序是一个常见的需求,它允许用户通过拖拽的方式重新排列列表项的顺序,本文将介绍如何使用原生JavaScript实现这一功能,需要的可以了解下2024-01-01
这篇文章主要介绍了利用JS生成博文目录及CSS定制博客的相关资料,需要的朋友可以参考下2016-02-02
在网页使用过程中，经常会用到代码的展示。代码高亮可以直观的了解代码，本文主要介绍了highlight.js 代码高亮插件的使用详解，具有一定的参考价值，感兴趣的可以了解一下2022-01-01
这篇文章主要介绍了JS实现网页右侧带动画效果的伸缩窗口代码,通过JavaScript基于时间函数实现页面元素样式渐变效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
微信小程序picker组件关于objectArray数据类型的绑定方法
这篇文章主要介绍了微信小程序picker组件关于objectArray数据类型的绑定方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
最近在使用微信小程序开发的时候遇到了一个需求,需要实现历史搜索记录的功能,所以下面这篇文章主要给大家介绍了关于微信小程序实现历史搜索功能(h5同理)的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了详解js创建对象的几种方式和对象方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
JavaScript中find()和 filter()方法的区别小结
js中find和filter方法大家在工作中会经常遇到,那么他们有什么区别呢？这篇文章主要给大家介绍了关于JavaScript中find()和 filter()方法区别的相关资料,需要的朋友可以参考下2021-12-12
这篇文章主要介绍了javascript获取系统当前时间的方法，格式为：2015年11月19日 星期四09:21:05，需要的朋友可以参考下2015-11-11
最新评论