js怎么實(shí)現(xiàn)簡單選項(xiàng)卡功能

發(fā)布時(shí)間：2021-04-19 09:43:13 來源：億速云閱讀：237 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)js怎么實(shí)現(xiàn)簡單選項(xiàng)卡功能，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

具體內(nèi)容如下

首先我們來寫HTML代碼，構(gòu)建出整體結(jié)構(gòu)

代碼如下：

<!--導(dǎo)航欄部分HTML代碼-->
<nav id="nav">
 <ul>
 <li class="act">選卡1</li>
 <li>選卡2</li>
 <li>選卡3</li>
 <li>選卡4</li>
 </ul>
</nav>
<!--內(nèi)容部分HTML代碼-->
<div id="container">
 <section class="tab" >內(nèi)容1</section>
 <section class="tab" >內(nèi)容2</section>
 <section class="tab" >內(nèi)容3</section>
 <section class="tab" >內(nèi)容4</section>
</div>

注：section 部分添加了style，目的是方便演示，為規(guī)范HTML與css的代碼風(fēng)格，不推薦這樣使用。

接著我們使用css代碼構(gòu)建出樣式

代碼如下：

*{
 text-align: center;
 }
 nav li{
 display: inline;
 width: 24%;
 text-decoration: none;
 padding: 15px;
 }
 li:hover{
 background-color: lightblue;
 }
 section{
 height: 300px;
}

最后是js的代碼，實(shí)現(xiàn)選項(xiàng)卡功能

代碼如下：

window.onload=function () {
 //獲取 li 也就是選項(xiàng)卡選項(xiàng)tab
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');
 //獲取 包裹在container里面的section（內(nèi)容）
 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 //使用 循環(huán)依次得到li 
 for(var i=0;i<oNav.length;i++){
 oNav[i].index=i;
 //每一次得到li后執(zhí)行鼠標(biāo)點(diǎn)擊操作則觸發(fā)函數(shù)function 
 oNav[i].onclick=function () { //此處除了可以使用onclick，還可以使用onmouseover
 //在li的個(gè)數(shù)內(nèi)依次展示內(nèi)容 
 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實(shí)現(xiàn)簡單選項(xiàng)卡的全部內(nèi)容，下面是整個(gè)代碼，復(fù)制粘貼到編譯器即可運(yùn)行

<!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>
<!--導(dǎo)航欄部分HTML代碼-->
<nav id="nav">
 <ul>
 <li class="act">選卡1</li>
 <li>選卡2</li>
 <li>選卡3</li>
 <li>選卡4</li>
 </ul>
</nav>
<!--內(nèi)容部分HTML代碼-->
<div id="container">
 <section class="tab" >內(nèi)容1</section>
 <section class="tab" >內(nèi)容2</section>
 <section class="tab" >內(nèi)容3</section>
 <section class="tab" >內(nèi)容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>

以下是效果圖

js怎么實(shí)現(xiàn)簡單選項(xiàng)卡功能