js實(shí)現(xiàn)菜單跳轉(zhuǎn)效果
更新時(shí)間：2020年12月11日 17:22:29 作者：KindleYoung
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)菜單跳轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)菜單跳轉(zhuǎn)效果的具體代碼，供大家參考，具體內(nèi)容如下
想要的效果圖：
直接上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 300px;
/* border: 1px solid #ccc; */
margin: 50px auto;
}
span {
width: 80px;
height: 30px;
border: 1px solid #ccc;
display: inline-block;
text-align: center;
line-height: 30px;
}
.body {
margin-top: 5px;
width: 450px;
border: 1px solid #ccc;
height: 250px;
background: #eee;
}
.current {
color: red;
background: #555;
}
.body div {
display: none;
text-align: center;
line-height: 250px;
}
.body .active {
display: block
}
</style>
</head>
<body>
<div class="box">
<div class="header">
<span class="current">關(guān)注</span>
<span>推薦</span>
<span>熱點(diǎn)</span>
<span>本地</span>
<span>段子</span>
</div>
<div class="body">
<div class="active">關(guān)注：早上吃什么？</div>
<div>推薦：中午吃什么？</div>
<div>熱點(diǎn)：晚飯吃什么？</div>
<div>本地：宵夜吃什么？</div>
<div>段子：半夜吃什么？</div>
</div>
</div>
<script>
var oSpan = document.querySelectorAll('span')
var oDiv = document.querySelector('.body').children
for (let i = 0; i < oSpan.length; i++) {
oSpan[i].index = i
console.log(oSpan[i].index);
oSpan[i].onclick = function () {
for (let k = 0; k < oSpan.length; k++) {
oSpan[k].classList.remove('current')
}
this.classList.add('current')
console.log(oSpan[i].index);
for (let k = 0; k < oSpan.length; k++) {
oDiv[k].classList.remove('active')
}
oDiv[this.index].classList.add('active')
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript類型檢測之typeof 和 instanceof 的缺陷與優(yōu)化
在javascript中，typeof 和 instanceof 是用來判斷數(shù)據(jù)類型比較通用的兩個(gè)方法，這篇文章的目的是通過對(duì)這兩個(gè)方法介紹來分析其存在的不足并提出優(yōu)化方案2016-01-01
白屏?xí)r間是指用戶進(jìn)入該網(wǎng)站(比如刷新頁面、跳轉(zhuǎn)到新頁面等通過該方式)的時(shí)刻開始計(jì)算,一直到頁面內(nèi)容顯示出來之前的時(shí)間節(jié)點(diǎn),這篇文章主要給大家介紹了關(guān)于前端如何計(jì)算首屏及白屏?xí)r間的相關(guān)資料,需要的朋友可以參考下2024-07-07
javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法
這篇文章主要介紹了javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家介紹了three.js?Mool3D模型類的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
ie8下修改input的type屬性報(bào)錯(cuò)的解決方法
當(dāng)用戶勾選顯示明文復(fù)選框時(shí)，要以明文顯示用戶輸入的密碼，去掉勾選時(shí)要變回密文，問題是ie8中是不允許修改input的type屬性2014-09-09
Array?對(duì)象是前端開發(fā)中使用頻率最高的數(shù)據(jù)結(jié)構(gòu)之一,今天我們來復(fù)習(xí)一下它的幾種操作方法,find(),some()和filter(),通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
基于JavaScript實(shí)現(xiàn)無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)無縫滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript 封裝Ajax傳遞的數(shù)據(jù)代碼
在使用Ajax傳輸數(shù)據(jù)時(shí)，少不了對(duì)傳遞的字符進(jìn)行轉(zhuǎn)碼，我的實(shí)現(xiàn)方式是將需要傳遞的數(shù)據(jù)暫存到一js Bean中，將js Bean放到Array中，生成傳輸參數(shù)時(shí)對(duì)Array中的jsBean進(jìn)行分解，得到相應(yīng)屬性信息并編碼..2009-06-06
這篇文章主要介紹了淺談讓你的代碼更簡短，更整潔，更易讀的ES6小技巧，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
JS實(shí)現(xiàn)時(shí)間校驗(yàn)的代碼
這篇文章主要介紹了JS實(shí)現(xiàn)時(shí)間校驗(yàn)的代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05