利用js定義一個(gè)導(dǎo)航條菜單

更新時(shí)間：2017年03月14日 09:24:08 作者：東騰

本文主要介紹了利用js定義一個(gè)導(dǎo)航條菜單的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧

效果：

一、html代碼：

<div class="Maintenance">
  <div class="Title">
   <div class="M_Button" id="Plan">menu1</div>
   <div class="M_Button" id="Expert">menu2</div>
   <div class="M_Button" id="Team">menu3</div>
   <div class="M_Button" id="Medic">menu4</div>
   <div class="M_Button" id="Shelter">menu5</div>
   <div class="M_Button" id="Warehouse">menu6</div>
  </div>
 </div>
 <!-- menu1 -->
 <div class="Content" id="coPlan">111
 </div>
 <!-- menu2 -->
 <div class="Content" id="coExpert" style="display: none">222
 </div>
 <!-- menu3 -->
 <div class="Content" id="coTeam" style="display: none">333
 </div>
 <!-- menu4-->
  <div class="Content" id="coMedic" style="display: none">444
 </div>
 <!--menu5-->
 <div class="Content" id="coShelter" style="display: none">
    </div>
 </div>
 <!-- menu6 -->
 <div class="Content" id="coWarehouse" style="display: none">666
 </div>

二、js代碼

$(".M_Button").click(function () {
  $(".M_Button").removeClass("M_Button_inner");
  $(this).addClass("M_Button_inner");
  $(".Content").hide();
  TabButton = $(this).attr('id');
  $('#co' + TabButton).css('display', 'block');
 });

三、css代碼

.M_Button {
 float: left;
 height: 42px;
 width: 98px;
 cursor: pointer;
 line-height: 42px;
 color: #FFFFFF;
 text-align: center;
 font-size: 14px;
 background-image: url(../../images/emergency/ReffectRadius/The_pop-up_1.png);
 background-repeat: no-repeat;
 background-position: right;
}
 .M_Button:hover {
  color: #000;
  background-image: url(../../images/emergency/ReffectRadius/The_pop-up_2.png);
  background-repeat: repeat-x;
 }
.M_Button_inner {
 color: #000;
 background-image: url(../../images/emergency/ReffectRadius/The_pop-up_2.png);
 background-repeat: repeat-x;
}
.Content {
 float: left;
 height: 438px;
 width: 100%;
 /*background-image: url(../../../../images/Inspection/Hidden_danger/background.png);*/
}
.M_Content {
 height: 434px;
 width: 100%;
 z-index: 5;
 position: absolute;
 /*background-color: #666;*/
 right: 2px;
 top: 0px;
}

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js判斷鼠標(biāo)同時(shí)離開兩個(gè)div的思路及代碼
js判斷鼠標(biāo)同時(shí)離開兩個(gè)div想了好長時(shí)間終于出爐了，下面與大家分享下具體的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下啊
2013-05-05
微信小程序記住密碼的功能簡單幾步實(shí)現(xiàn)
軟件中的“記住密碼”選框不知道大家平時(shí)會(huì)不會(huì)勾選，反正對于一個(gè)重度懶癌患者的我來說就沒有不勾選的時(shí)候，畢竟隔一段時(shí)間就重新輸入一遍難記又難輸?shù)馁~號密碼，想想就讓人頭皮發(fā)麻。今天教大家用代碼在微信小程序中實(shí)現(xiàn)這個(gè)簡單的小功能
2023-01-01
JS拖拽的進(jìn)一步練習(xí)，移動(dòng)與拉伸實(shí)現(xiàn)代碼
這次增加了一些相關(guān)的功能，增加四個(gè)角的拉伸改變寬度，主要還是用到一些簡單的坐標(biāo)位置計(jì)算，沒有什么技術(shù)難度，熟練了一下自己對拖拽的運(yùn)用
2012-05-05
Typescript 函數(shù)重載的實(shí)現(xiàn)
本文主要介紹了Typescript 函數(shù)重載的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Flow之一個(gè)新的Javascript靜態(tài)類型檢查器
今天我們興奮的發(fā)布了 Flow 的嘗鮮版，一個(gè)新的Javascript靜態(tài)類型檢查器。Flow為Javascript添加了靜態(tài)類型檢查，以提高開發(fā)效率和代碼質(zhì)量，本文給大家分享Flow之一個(gè)新的Javascript靜態(tài)類型檢查器，感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
javascript 精確獲取樣式屬性（上）
設(shè)置與獲取樣式屬性是UI控件與特效庫非常關(guān)鍵的部分，設(shè)置樣式我們基本可以用cssText來包打天下，但獲取樣式就不是這回事了。
2010-01-01
JavaScript cookie與session的使用及區(qū)別深入探究
這篇文章主要介紹了Java中Cookie和Session詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下
2022-10-10
解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問題
這篇文章主要給大家介紹了關(guān)于如何解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問題的相關(guān)資料,xlsx.js是一種前端庫,它可以使您使用JavaScript讀取、解析和導(dǎo)出電子表格文件,如Microsoft Excel,需要的朋友可以參考下
2024-03-03
js中switch case循環(huán)實(shí)例代碼
這篇文章主要介紹了js中switch case循環(huán)實(shí)例代碼，有需要的朋友可以參考一下
2013-12-12
javascript htmlencode函數(shù)(ff兼容版) 主要是編輯器中反轉(zhuǎn)html代碼
非常不錯(cuò)的htmlencode 方法，比用正則實(shí)現(xiàn)的更好，而且效率高，推薦使用第一種方法。
2009-06-06