一個(gè)js控制的導(dǎo)航菜單實(shí)例代碼
這種菜單效果是通過腳本和樣式控制的，對(duì)于新手來說是非常好的學(xué)習(xí)內(nèi)容：
這種昨晚一邊看舞動(dòng)奇跡，一邊整理這個(gè)菜單的小代碼，一起來看看吧，會(huì)了可以溫故知新，不會(huì)的可以借鑒一下思想，其實(shí)就是想完善一下這種前端的思想，讓它不要再陌生：
這是一個(gè)asp.net的master頁面里面的菜單部分
Html部分：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" rel="Stylesheet" href="Styles/master.css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/nav.js" type="text/javascript"></script>
</head>
<body>
<div class="nav" id="nav">
<input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
<a href="Default.aspx?menutemp=0" class="check">首頁</a>
<a href="surveylist.aspx?menutemp=1">醫(yī)院概況</a>
<a href="Culturelist.aspx?menutemp=2">醫(yī)院文化</a>
<a href="Tumor dynamic list.aspx?menutemp=3">醫(yī)院動(dòng)態(tài)</a>
<a href="Services list .aspx?menutemp=4">醫(yī)院服務(wù)</a>
<a href="Medical guidelines.aspx?menutemp=5">就診指南</a>
<a href="Introduce department.aspx?menutemp=6">科室介紹</a>
</div>
</body>
</html>
看看css部分把，這是來區(qū)分選中項(xiàng)和其他項(xiàng)的：
#master .head .nav a.check{ background:url(../images/navbg.png) 1px 1px no-repeat; color:#fff;}
下面就是給html賦予生命的js部分，是他讓網(wǎng)頁動(dòng)起來：
$(document).ready(function () {//表示要在網(wǎng)頁加載之后運(yùn)行
var current = $("#masterid").val();//通過jquery方式獲取id=masterid的頁面元素的值，其實(shí)就是為了獲取選中的那個(gè)菜單
var alist = new Array();//定義數(shù)組
if (current == "") {//要是沒有獲取到選中的菜單，我們就忽略這個(gè)
current = -1;
}
$("#nav>a").each(function (i, items) {//這個(gè)部分就是在你點(diǎn)擊了菜單一項(xiàng)后，還么有刷新頁面時(shí)候的樣式變化，哈哈，each是一個(gè)遍歷函數(shù)，會(huì)遍歷#nav>a的集合。
alist[i] = $(items);//i是從0開始到遍歷集合結(jié)束為止，自增1的
$(alist[i]).click(function () {//對(duì)alist[i]進(jìn)行注冊(cè)點(diǎn)擊事件，點(diǎn)擊就會(huì)執(zhí)行對(duì)應(yīng)的方法，
if (i != current) {//要是選擇了不同的菜單項(xiàng)，就會(huì)給選擇的菜單加上應(yīng)有的樣式，而之前的就會(huì)去除樣式
$(this).addClass("check");
$(alist[current]).removeClass("check");
current = i;//返回新選擇的菜單項(xiàng)id
}
});
});
$("#nav>a").each(function (i, items) {//這是在頁面跳轉(zhuǎn)到新頁面后對(duì)頁面樣式的處理，讓菜單的樣式正確調(diào)用。
alist[i] = $(items);
if (i != current) {
$(alist[i]).removeClass("check");
}
});
$(alist[current]).addClass("check");
});
好了，你可以趕快試一下吧。
- JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單
- JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果
- CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果
- js實(shí)現(xiàn)移動(dòng)端導(dǎo)航點(diǎn)擊自動(dòng)滑動(dòng)效果
- JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航欄變色特效
- js實(shí)現(xiàn)無限級(jí)樹形導(dǎo)航列表效果代碼
- js實(shí)現(xiàn)的常用的左側(cè)導(dǎo)航效果
- JavaScript實(shí)現(xiàn)滑動(dòng)導(dǎo)航欄效果
- 原生js實(shí)現(xiàn)波浪導(dǎo)航效果
相關(guān)文章
javascript實(shí)現(xiàn)富文本框選中對(duì)齊的思路與代碼
最近在項(xiàng)目中經(jīng)常遇到使用富文本框的情況,下面這篇文章主要給大家介紹了關(guān)于javascript實(shí)現(xiàn)富文本框選中對(duì)齊的思路與代碼,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
原生js實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)
下面小編就為大家?guī)硪黄鷍s實(shí)現(xiàn)ajax方法(超簡(jiǎn)單)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
老生常談js動(dòng)態(tài)添加事件--- 事件委托
下面小編就為大家?guī)硪黄仙Ｕ刯s動(dòng)態(tài)添加事件--- 事件委托。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
重寫document.write實(shí)現(xiàn)無阻塞加載js廣告(補(bǔ)充)
這篇文章主要介紹了重寫document.write實(shí)現(xiàn)無阻塞加載js廣告,需要的朋友可以參考下2014-12-12
探索export導(dǎo)出一個(gè)字面量會(huì)報(bào)錯(cuò)export?default不會(huì)報(bào)錯(cuò)
這篇文章主要為大家介紹了export導(dǎo)出一個(gè)字面量會(huì)報(bào)錯(cuò)而export?default不會(huì)報(bào)錯(cuò)的問題探索解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
JavaScript實(shí)現(xiàn)網(wǎng)頁跨年倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁跨年倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能
最近做個(gè)項(xiàng)目，需要實(shí)現(xiàn)移動(dòng)端左滑刪除功能，當(dāng)時(shí)js代碼將網(wǎng)上找的進(jìn)行刪減優(yōu)化，下面通過本文給大家分享基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能，感興趣的朋友一起看看2017-07-07
不用AI也能實(shí)現(xiàn)的文字自動(dòng)播報(bào)(SpeechSynthesis文本實(shí)例合成)
SpeechSynthesis是HTML5的一個(gè)新特性，基于SpeechSynthesis可以實(shí)現(xiàn)在客戶瀏覽器端進(jìn)行動(dòng)態(tài)文本的語音合成播放，這篇文章主要介紹了不用AI也能實(shí)現(xiàn)的文字自動(dòng)播報(bào)(SpeechSynthesis文本實(shí)例合成),需要的朋友可以參考下2023-03-03
javascript延時(shí)重復(fù)執(zhí)行函數(shù) lLoopRun.js
javascript延時(shí)重復(fù)執(zhí)行函數(shù) lLoopRun.js...2007-06-06
狼人殺是一款多人參與的，通過語言描述推動(dòng)、較量口才和分析判斷能力的策略類桌面游戲。本文將利用小程序?qū)崿F(xiàn)這一游戲，需要的可以參考一下2022-03-03