js實現(xiàn)菜單跳轉(zhuǎn)效果
更新時間：2020年12月11日 17:22:29 作者：KindleYoung
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)菜單跳轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(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>熱點</span>
<span>本地</span>
<span>段子</span>
</div>
<div class="body">
<div class="active">關(guān)注：早上吃什么？</div>
<div>推薦：中午吃什么？</div>
<div>熱點：晚飯吃什么？</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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript類型檢測之typeof 和 instanceof 的缺陷與優(yōu)化
在javascript中，typeof 和 instanceof 是用來判斷數(shù)據(jù)類型比較通用的兩個方法，這篇文章的目的是通過對這兩個方法介紹來分析其存在的不足并提出優(yōu)化方案2016-01-01
白屏?xí)r間是指用戶進(jìn)入該網(wǎng)站(比如刷新頁面、跳轉(zhuǎn)到新頁面等通過該方式)的時刻開始計算,一直到頁面內(nèi)容顯示出來之前的時間節(jié)點,這篇文章主要給大家介紹了關(guān)于前端如何計算首屏及白屏?xí)r間的相關(guān)資料,需要的朋友可以參考下2024-07-07
javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法
這篇文章主要介紹了javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家介紹了three.js?Mool3D模型類的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
當(dāng)用戶勾選顯示明文復(fù)選框時，要以明文顯示用戶輸入的密碼，去掉勾選時要變回密文，問題是ie8中是不允許修改input的type屬性2014-09-09
Array?對象是前端開發(fā)中使用頻率最高的數(shù)據(jù)結(jié)構(gòu)之一,今天我們來復(fù)習(xí)一下它的幾種操作方法,find(),some()和filter(),通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)無縫滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript 封裝Ajax傳遞的數(shù)據(jù)代碼
在使用Ajax傳輸數(shù)據(jù)時，少不了對傳遞的字符進(jìn)行轉(zhuǎn)碼，我的實現(xiàn)方式是將需要傳遞的數(shù)據(jù)暫存到一js Bean中，將js Bean放到Array中，生成傳輸參數(shù)時對Array中的jsBean進(jìn)行分解，得到相應(yīng)屬性信息并編碼..2009-06-06
這篇文章主要介紹了淺談讓你的代碼更簡短，更整潔，更易讀的ES6小技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了JS實現(xiàn)時間校驗的代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05