js实现简单选项卡功能

本文为大家分享了js实现简单选项卡功能的具体代码,供大家参考,具体内容如下

首先我们来写HTML代码,构建出整体结构

代码如下:

<!--导航栏部分HTML代码-->

<nav id="nav">

<ul>

<li class="act">选卡1</li>

<li>选卡2</li>

<li>选卡3</li>

<li>选卡4</li>

</ul>

</nav>

<!--内容部分HTML代码-->

<div id="container">

<section class="tab" style="background-color: tomato">内容1</section>

<section class="tab" style="background-color: cyan">内容2</section>

<section class="tab" style="background-color: blueviolet">内容3</section>

<section class="tab" style="background-color: gold">内容4</section>

</div>

注:section 部分添加了style,目的是方便演示,为规范HTML与css的代码风格,不推荐这样使用。

接着我们使用css代码构建出样式

代码如下:

*{

text-align: center;

}

nav li{

display: inline;

width: 24%;

text-decoration: none;

padding: 15px;

}

li:hover{

background-color: lightblue;

}

section{

height: 300px;

}

最后是js的代码,实现选项卡功能

代码如下:

window.onload=function () {

//获取 li 也就是选项卡选项tab

var nav=document.getElementById('nav');

var oNav=nav.getElementsByTagName('li');

//获取 包裹在container里面的section(内容)

var container=document.getElementById('container');

var oDiv=container.getElementsByClassName('tab');

//使用 循环依次得到li

for(var i=0;i<oNav.length;i++){

oNav[i].index=i;

//每一次得到li后执行鼠标点击操作则触发函数function

oNav[i].onclick=function () { //此处除了可以使用onclick,还可以使用onmouseover

//在li的个数内依次展示内容

for(var i=0;i<oNav.length;i++){

oNav[i].className='';

oDiv[i].style.display="none";

}

this.className='act';

oDiv[this.index].style.display="block"

}

for(var m=1;m<oNav.length;m++){

oNav[m].className='';

oDiv[m].style.display="none";

}

}

};

此上就是用js实现简单选项卡的全部内容,下面是整个代码,复制粘贴到编译器即可运行

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

*{

text-align: center;

}

nav li{

display: inline;

width: 24%;

text-decoration: none;

padding: 15px;

}

li:hover{

background-color: lightblue;

}

section{

height: 300px;

}

</style>

</head>

<body>

<!--导航栏部分HTML代码-->

<nav id="nav">

<ul>

<li class="act">选卡1</li>

<li>选卡2</li>

<li>选卡3</li>

<li>选卡4</li>

</ul>

</nav>

<!--内容部分HTML代码-->

<div id="container">

<section class="tab" style="background-color: tomato">内容1</section>

<section class="tab" style="background-color: cyan">内容2</section>

<section class="tab" style="background-color: blueviolet">内容3</section>

<section class="tab" style="background-color: gold">内容4</section>

</div>

<script>

window.onload=function () {

var nav=document.getElementById('nav');

var oNav=nav.getElementsByTagName('li');

var container=document.getElementById('container');

var oDiv=container.getElementsByClassName('tab');

for(var i=0;i<oNav.length;i++){

oNav[i].index=i;

oNav[i].onclick=function () {

for(var i=0;i<oNav.length;i++){

oNav[i].className='';

oDiv[i].style.display="none";

}

this.className='act';

oDiv[this.index].style.display="block"

}

for(var m=1;m<oNav.length;m++){

oNav[m].className='';

oDiv[m].style.display="none";

}

}

};

</script>

</body>

</html>

以下是效果图

注:网上还用很多用jQuery实现选项卡的方法,只需三行,等下次有机会弄懂了再分享。

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上是 js实现简单选项卡功能 的全部内容, 来源链接: utcz.com/z/328899.html

回到顶部