用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都不会显示的错误结果。
正确的效果图为：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现简单选项卡功能
本文为大家分享了js实现简单选项卡功能的具体代码,供大家参考,具体内容如下 首先我们来写HTML代码,构建出整体结构 代码如下: <!--导航栏部分HTML代码--> <nav id="nav"> <ul> <li class="act">选卡1</li> <li>选卡2</li> <li>选卡3</li> <li>选卡4</li> &
-
JS实现选项卡实例详解
本文实例讲述了JS实现选项卡的方法.分享给大家供大家参考,具体如下: 思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的. 1.首先获取元素. 2.for循环历遍按钮元素添加onclick 或者 onmousemove事件. 3.因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none. 4.把当前按钮添加样式,把当前DIV显示出来,display设置为bl
-
用JS编写选项卡效果
本文实例为大家分享了JS编写选项卡效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; } .selectka { width:500px; height:400px; mar
-
js实现简单的可切换选项卡效果
本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{margin:0; padding:0; font:12
-
JS实现选项卡插件的两种写法（jQuery和class）
本文实例为大家分享了JS实现选项卡插件的2种写法,供大家参考,具体内容如下 实现插件的几个注意点: (1)定义一个固定的html结构,比如选项卡的标题的标签为为li,每个选项卡的内容的标签为div等等: (2)选中时的样式提前确定: (3)最好先用简单的JS实现选项卡的功能,再改为插件的模式. html结构如下: <style> * { margin: 0; padding: 0; } ul { list-style: none; } #tabBox { box-sizing: border-
-
js实现简单选项卡制作
本文实例为大家分享了js实现简单选项卡制作代码,供大家参考,具体内容如下 实现功能 通过点击按钮查看相应的介绍: 按钮相应的变色: 内容相应的切换: html 文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
-
js利用iframe实现选项卡效果
本文实例为大家分享了js利用iframe实现选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .header{ width: 400px; height: 40px; border:solid 1px red; } .header a{ width: 1
-
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&quo
-
js选项卡的实现方法
本文实例讲述了js选项卡的实现方法.分享给大家供大家参考.具体分析如下: 一.思路 1. 获取元素: 2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件: 3. 点击当前按钮时会以高亮状态显示,通过for循环历遍把所有的按钮样式设置为空在把所有div的display设置为none. 4. 点击当前按钮添加样式,把当前div显示出来,display设置为block. 二.html代码: <div id="div1"> <inpu
-
javascript实现tabs选项卡切换效果(自写原生js)
现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下: html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</