基于JavaScript實現(xiàn)選項卡效果
一個簡單的選項卡的關(guān)鍵在于：當(dāng)切換頁面時，如何讓所選的選項和與其對應(yīng)的內(nèi)容同時出現(xiàn)，并且在選擇其他的內(nèi)容時，不影響新的內(nèi)容的顯示。
其中用到兩個很關(guān)鍵的思想：
1.為對象增加index屬性，并通過this對index 的調(diào)用來使每個選項能顯示出所對應(yīng)的內(nèi)容，并且屬性值要設(shè)置為循環(huán)時的數(shù)值-i。
2.通過對class（類）的靈活使用，來改變當(dāng)先所選中目標(biāo)的樣式。
3、用for循環(huán)嵌套事件對每一項進行遍歷。
4、在編譯時，位于body中的div和input要有預(yù)先定義的行內(nèi)樣式或者信息。
5、button和div.style.display要同時清零，同時出現(xiàn)才能達(dá)到選項卡的目的。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<style type="text/css">
#div1 .active{
background: red;
color: white;
}
#div1 div{
width: 237px;
height:150px;
background:#CCC;
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv = document.getElementById('div1');
var btn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for (var i = 0; i < btn.length; i++) {
btn[i].index=i;
//給btn增加一個index的屬性
btn[i].onmouseover = function(){
for (var i = 0; i < btn.length; i++) {
btn[i].className = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
//調(diào)用index屬性
}
}
};
</script>
</head>
<body>
<div id="div1">
<input type="button" value="首頁" class="active">
<input type="button" value="菜單">
<input type="button" value="幫助">
<input type="button" value="聯(lián)系">
<input type="button" value="贊助">
<div style="display: block;">這是首頁</div>
<div>這是菜單</div>
<div>這是幫助</div>
<div>這是聯(lián)系</div>
<div>這是贊助</div>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)數(shù)碼表特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
jq.ajax+php+mysql實現(xiàn)關(guān)鍵字模糊查詢(示例講解)
下面小編就為大家分享一篇jq.ajax+php+mysql實現(xiàn)關(guān)鍵字模糊查詢(示例講解)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JavaScript 快捷鍵設(shè)置實現(xiàn)代碼
屏蔽Alt+F4等快捷鍵 IE Javascript快捷鍵操作2009-03-03
微信小程序如何設(shè)置基本的頁面樣式，做出用戶界面UI
這篇文章主要介紹了微信小程序如何設(shè)置基本的頁面樣式，做出用戶界面UI。如何為這個頁面添加樣式，使它看上去更美觀，教大家寫出實際可以使用的頁面。2022-12-12
在國際象棋的8*8棋盤上如何擺放8個皇后使任一皇后無法吃掉其他皇后的問題便是最初的八皇后問題,此后也被不斷擴展而作為經(jīng)典的算法題目,這里我們就來看一下JavaScript解八皇后問題的方法總結(jié)2016-06-06
微信小程序通過自定義animate-numbers組件實現(xiàn)進入頁面時數(shù)字跳動效果
文章介紹了如何在微信小程序中實現(xiàn)進入頁面時的數(shù)字跳動效果,通過自定義一個名為`animate-numbers`的組件來實現(xiàn)這一功能,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
Flexigrid在IE下不顯示數(shù)據(jù)的有效處理方法
Flexigrid在IE下不顯示數(shù)據(jù)的處理方法是：指定一下Ajax請求數(shù)據(jù)的方式為Get方式,遇到此問題的朋友可以參考下2014-09-09
JS實現(xiàn)動態(tài)倒計時功能（天數(shù)、時、分、秒）
這篇文章主要介紹了JS實現(xiàn)動態(tài)倒計時功能詳解（天數(shù)、時、分、秒）,需要的朋友可以參考下2019-12-12![JavaScript中document.forms[0]與getElementByName區(qū)別](http://img.jbzj.com/images/xgimg/bcimg8.png)
JavaScript中document.forms[0]與getElementByName區(qū)別
在很多情況下JavaScript中document.forms[0]與getElementByName這兩種用法沒有區(qū)別，這片文章詳細(xì)的解釋了兩者的區(qū)別和用法，有興趣的朋友可以參考一下。2015-01-01
抓取JavaScript動態(tài)加載的內(nèi)容的方法總結(jié)
JavaScript動態(tài)加載的內(nèi)容常見于現(xiàn)代Web應(yīng)用中,用于增強用戶體驗和減少初始頁面加載時間,然而,這些動態(tài)加載的內(nèi)容對于傳統(tǒng)的網(wǎng)頁抓取工具來說往往是不可見的,本文主要介紹了有JavaScript動態(tài)加載的內(nèi)容如何抓取,需要的朋友可以參考下2024-09-09