js實(shí)現(xiàn)菜單跳轉(zhuǎn)效果

更新時間：2020年12月11日 17:22:29 作者：KindleYoung

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)菜單跳轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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