基于JavaScript實現(xiàn)選項卡效果
更新時間：2017年07月21日 09:32:06 作者：zhaoke_930325
這篇文章主要為大家詳細(xì)介紹了基于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)才能達到選項卡的目的。
代碼：
<!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)文章
這篇文章主要為大家介紹了JS?中Proxy代理和?Reflect反射方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家詳細(xì)介紹了js點擊按鈕實現(xiàn)圖片排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了微信小程序--特定區(qū)域滾動到頂部時固定的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
雖然精通jquery，但對它的原型javascript卻不是很了解，最近在學(xué)習(xí)javascript中遇到了一些困難，比如冒泡和捕獲，很多次被提到，但又不知究竟應(yīng)用在何處。找到了一些好文章解惑，在這里分享給大家2014-04-04
這篇文章主要介紹了JS隨機洗牌算法之給數(shù)組隨機排序的相關(guān)資料,需要的朋友可以參考下2016-03-03
一個正則表達式要如何書寫才能同時匹配這兩個數(shù)字呢？簡單的字符表達式當(dāng)然無法完成了，這個時候我們就可以定義一個字符集合（字符類）來進行匹配。這就是分組匹配了2015-04-04
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)點擊文本框顯示日期選擇器特效，提高了工作效率，推薦給大家，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
ajax跨域調(diào)用webservice的實現(xiàn)代碼
這篇文章主要介紹了 ajax跨域調(diào)用webservice服務(wù)例子和理解，最近ajax訪問webservice遇到跨域的問題，網(wǎng)上搜索資料，總結(jié)如下2016-05-05
微信小程序MUI側(cè)滑導(dǎo)航菜單示例(Popup彈出式,左側(cè)滑動,右側(cè)不動)
這篇文章主要介紹了微信小程序MUI側(cè)滑導(dǎo)航菜單,結(jié)合實例形式分析了微信小程序Popup彈出式,左側(cè)滑動,右側(cè)不動菜單功能相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2019-01-01
復(fù)習(xí)下事件,長年用JQ,都給忘了~2010-12-12