欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一個(gè)js控制的導(dǎo)航菜單實(shí)例代碼

 更新時(shí)間：2013年12月03日 10:41:53   作者：  
這篇文章主要是對(duì)js控制的導(dǎo)航菜單實(shí)例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

這種菜單效果是通過(guò)腳本和樣式控制的，對(duì)于新手來(lái)說(shuō)是非常好的學(xué)習(xí)內(nèi)容：

這種昨晚一邊看舞動(dòng)奇跡，一邊整理這個(gè)菜單的小代碼，一起來(lái)看看吧，會(huì)了可以溫故知新，不會(huì)的可以借鑒一下思想，其實(shí)就是想完善一下這種前端的思想，讓它不要再陌生：

這是一個(gè)asp.net的master頁(yè)面里面的菜單部分

Html部分：

復(fù)制代碼 代碼如下:

<%@ 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">首頁(yè)</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部分把，這是來(lái)區(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)頁(yè)動(dòng)起來(lái)：

復(fù)制代碼 代碼如下:

$(document).ready(function () {//表示要在網(wǎng)頁(yè)加載之后運(yùn)行

    var current = $("#masterid").val();//通過(guò)jquery方式獲取id=masterid的頁(yè)面元素的值，其實(shí)就是為了獲取選中的那個(gè)菜單

    var alist = new Array();//定義數(shù)組

    if (current == "") {//要是沒有獲取到選中的菜單，我們就忽略這個(gè)

        current = -1;

    }

    $("#nav>a").each(function (i, items) {//這個(gè)部分就是在你點(diǎn)擊了菜單一項(xiàng)后，還么有刷新頁(yè)面時(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) {//這是在頁(yè)面跳轉(zhuǎn)到新頁(yè)面后對(duì)頁(yè)面樣式的處理，讓菜單的樣式正確調(diào)用。

        alist[i] = $(items);

        if (i != current) {

            $(alist[i]).removeClass("check");

        }

    });

    $(alist[current]).addClass("check");

});


好了，你可以趕快試一下吧。

相關(guān)文章

  • bootstrap datetimepicker控件位置異常的解決方法

    bootstrap datetimepicker控件位置異常的解決方法

    這篇文章主要為大家詳細(xì)介紹了bootstrap datetimepicker控件位置異常的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-11-11
  • Bootstarp基本模版學(xué)習(xí)教程

    Bootstarp基本模版學(xué)習(xí)教程

    這篇文章主要為大家詳細(xì)介紹了Bootstarp基本模版學(xué)習(xí)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-02-02
  • JavaScript實(shí)現(xiàn)多層顏色選項(xiàng)卡嵌套

    JavaScript實(shí)現(xiàn)多層顏色選項(xiàng)卡嵌套

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)多層顏色選項(xiàng)卡嵌套，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • javascript搜索自動(dòng)提示功能的實(shí)現(xiàn)

    javascript搜索自動(dòng)提示功能的實(shí)現(xiàn)

    使用 jQuery(Ajax)/PHP/MySQL實(shí)現(xiàn)自動(dòng)完成功我覺得我有必要寫這個(gè)教程，因?yàn)樵?jīng)見到的大部分關(guān)于自動(dòng)完成的應(yīng)用程序都只是給你一個(gè)程序源碼包，然后告訴你怎么使用，而不是告訴你它是如何工作的以及為什么這樣做。
    2008-06-06
  • 原生js 封裝get ,post, delete 請(qǐng)求的實(shí)例

    原生js 封裝get ,post, delete 請(qǐng)求的實(shí)例

    下面小編就為大家?guī)?lái)一篇原生js 封裝get ,post, delete 請(qǐng)求的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • JavaScript 是什么意思

    JavaScript 是什么意思

    javascript一種由Netscape的LiveScript發(fā)展而來(lái)的腳本語(yǔ)言，它提高與Java的兼容性。JavaScript采用HTML頁(yè)作為其接口。很多朋友問(wèn)js是什么意思？下面小編通過(guò)分享本教程給大家解答下，感興趣的朋友參考下
    2016-09-09
  • 改變checkbox默認(rèn)選中狀態(tài)及取值的實(shí)現(xiàn)代碼

    改變checkbox默認(rèn)選中狀態(tài)及取值的實(shí)現(xiàn)代碼

    下面小編就為大家?guī)?lái)一篇改變checkbox默認(rèn)選中狀態(tài)及取值的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-05-05
  • JavaScript深入介紹WebAPI的用法

    JavaScript深入介紹WebAPI的用法

    JS分成三個(gè)大的部分：ECMAScript、DOM API、BOM API，其中：ECMAScript是讓前端開發(fā)建立基本的編程思維。但是要想真正來(lái)寫一個(gè)更加復(fù)雜的有交互式的頁(yè)面,還需要WebAPI的支持，相當(dāng)于把后端編程實(shí)現(xiàn)成前端交互。DOM+BOM就組成了WebAPI
    2022-06-06
  • 一文帶你掌握J(rèn)avaScript中的EventLoop機(jī)制

    一文帶你掌握J(rèn)avaScript中的EventLoop機(jī)制

    JavaScript是?單線程、非阻塞?的,它通過(guò)事件隊(duì)列?(Event?Loop)?的方式來(lái)實(shí)現(xiàn)異步回調(diào),所以本文小編就帶大家來(lái)深入了解一下JavaScript中的EventLoop機(jī)制,需要的可以了解下
    2024-02-02
  • js 創(chuàng)建快捷方式的代碼(fso)

    js 創(chuàng)建快捷方式的代碼(fso)

    js 創(chuàng)建快捷方式的代碼,這個(gè)是在本地運(yùn)行的需要確認(rèn)的，需要的朋友可以參考下。
    2010-11-11

最新評(píng)論