用js实现简单的tab选项卡
更新时间：2021年09月16日 17:31:18 作者：梦里～花开又半夏…
这篇文章主要为大家详细介绍了用js实现简单的tab选项卡，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
tab选卡 现实网页的使用频率极高，基本上每个网页都需要使用一个或多个tab选卡
我们可以用js实现简单的tab选卡效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单的选卡效果</title>
<style>
body,ul{
margin:0;
padding:0;
}
li{
list-style: none;
}
.nav ul{
display: flex;
}
.nav li{
width: 40%;
margin: 1rem;
text-align: center;
font-size: 1.3rem;
}
.selected{
background-color: yellow;
}
.content div{
display: none
}
/* 初始的时候 只让第一块内容显示出来 */
.content div:nth-child(1){
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<!-- 初始的时候 让第一个选项被选中 -->
<li class="selected">导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</div>
<div class="content">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
<script>
//获得导航的所有选项
var li=document.querySelectorAll(".nav li");
//获得内容的所有div
var div=document.querySelectorAll(".content div")
for(var i=0;i<li.length;i++){
//关键 让li与div建立联系
li[i].index=i;
li[i].onmouseover=function(){
//将所有选项样式清空，所有内容隐藏
for(var j=0;j<li.length;j++){
li[j].className="";
div[j].style.display="none"
}
//为鼠标悬浮的选项设置样式 其对应的div显现出来
this.className="selected";
div[this.index].style.display="block";
}
}
</script>
</body>
</html>
需要注意的是：this，此时的this相当于li[i]。
li[i].index=i; 这一步必不可少，这是让li与div建立联系的关键，如果直接把div[this.index].style.display=“block”;这句代码改为div[i].style.display=“block”;将会达不到效果，这是因为i的值一直在加一，最后将会等于li.length，使得将出现 不管鼠标在哪个选项 每个div都不会显示的错误结果。
正确的效果图为：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了JavaScript动态加载CSS和JS文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-10-10
用 js操作html标签的一些代码，大家可以运行后查看效果2008-11-11
JavaScript中async await更优雅的错误处理方式
async/await中的异常处理很让人混乱,尽管有很多种方式来应对async 函数的异常,但是连经验丰富的开发者有时候也会搞错,所以这篇文章主要给大家介绍了关于JavaScript中async await更优雅的错误处理方式的相关资料,需要的朋友可以参考下2021-09-09
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能...2006-11-11
本想从语言的角度来分析，无奈功力不够，只能粗浅的尝试一下，于是称之管中窥豹，还望大牛指正2011-12-12
这篇文章主要介绍了Javascript地址引用代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
javascript下搜索子字符串的的实现代码(脚本之家修正版)
由于我的项目中要求到要对一个字符串进行查找，其查找要求有点BT了2009-12-12
Javascript构造函数是非常强大的,它可能也是Javascript能被充分利用的特点之一,文中通过实例代码介绍的非常详细,这篇文章主要给大家介绍了关于JavaScript构造函数的相关资料,需要的朋友可以参考下2023-04-04
深居内陆的人们，大概每个人都有过大海之梦吧。本文使用React+Three.js技术栈，实现3D海洋和岛屿，感兴趣的小伙伴可以跟随小编一起学习一下2022-05-05
ie6下如果用css图片平铺，会出现cpu短暂100%的情况，主要原因在于，ie6会重复下载图片。2010-12-12
最新评论