js實現(xiàn)菜單跳轉(zhuǎn)效果
更新時間：2020年12月11日 17:22:29 作者：KindleYoung
這篇文章主要為大家詳細介紹了js實現(xiàn)菜單跳轉(zhuǎn)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)禁止分享代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
用js來刷新當前頁面保留參數(shù)的具體實現(xiàn)
本文為大家詳細介紹下如何使用js來刷新當前頁面保留參數(shù)，下面有個不錯的實現(xiàn)大家可以看看2013-12-12
JavaScript中判斷整字類型最簡潔的實現(xiàn)方法
這篇文章主要介紹了JavaScript中判斷整字類型最簡潔的實現(xiàn)方法,本文給出多個判斷整數(shù)的方法,最后總結(jié)出一個最短、最簡潔的實現(xiàn)方法,需要的朋友可以參考下2014-11-11
這篇文章主要介紹了微信小程序頂部導航欄可滑動并選中放大,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
JS實現(xiàn)消息來時讓網(wǎng)頁標題閃動效果的方法
這篇文章主要介紹了JS實現(xiàn)消息來時讓網(wǎng)頁標題閃動效果的方法,實例分析了JavaScript基于時間函數(shù)動態(tài)操作頁面元素的技巧,并附帶了開心網(wǎng)的標題閃動解決方案,需要的朋友可以參考下2016-04-04
這篇文章主要和大家聊一聊JavaScript的New關(guān)鍵字，一般我們通過New關(guān)鍵字來創(chuàng)建一個類的實例對象，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了JavaScript如何使用插值實現(xiàn)圖像漸變,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了js簡單實現(xiàn)點擊左右運動的方法,實例分析了javascript實現(xiàn)左右運動的相關(guān)要點與技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了javascript 判斷當前瀏覽器版本并判斷ie版本的相關(guān)資料,需要的朋友可以參考下2017-02-02
silverlight線程與基于事件驅(qū)動javascript引擎（實現(xiàn)軌跡回放功能）
前一段時間一直在重構(gòu)工作站軌跡回放功能,一開始我覺得很簡單,但是后面引發(fā)了一系列奇怪的問題,讓我很疼,所以不得不寫個總結(jié)加深記憶,2011-08-08