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

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

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

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

這種昨晚一邊看舞動奇跡，一邊整理這個菜單的小代碼，一起來看看吧，會了可以溫故知新，不會的可以借鑒一下思想，其實就是想完善一下這種前端的思想，讓它不要再陌生：

這是一個asp.net的master頁面里面的菜單部分

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">首頁</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ī)院動態(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ū)分選中項和其他項的：

#master .head .nav a.check{ background:url(../images/navbg.png) 1px 1px no-repeat; color:#fff;}

下面就是給html賦予生命的js部分，是他讓網(wǎng)頁動起來：

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

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

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

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

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

        current = -1;

    }

    $("#nav>a").each(function (i, items) {//這個部分就是在你點擊了菜單一項后，還么有刷新頁面時候的樣式變化，哈哈，each是一個遍歷函數(shù)，會遍歷#nav>a的集合。

        alist[i] = $(items);//i是從0開始到遍歷集合結(jié)束為止，自增1的

        $(alist[i]).click(function () {//對alist[i]進行注冊點擊事件，點擊就會執(zhí)行對應(yīng)的方法，

            if (i != current) {//要是選擇了不同的菜單項，就會給選擇的菜單加上應(yīng)有的樣式，而之前的就會去除樣式

                $(this).addClass("check");

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

                current = i;//返回新選擇的菜單項id

            }

        });

    });

    $("#nav>a").each(function (i, items) {//這是在頁面跳轉(zhuǎn)到新頁面后對頁面樣式的處理，讓菜單的樣式正確調(diào)用。

        alist[i] = $(items);

        if (i != current) {

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

        }

    });

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

});


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

相關(guān)文章

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

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

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

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

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

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

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

    javascript搜索自動提示功能的實現(xiàn)

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

    原生js 封裝get ,post, delete 請求的實例

    下面小編就為大家?guī)硪黄鷍s 封裝get ,post, delete 請求的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • JavaScript 是什么意思

    JavaScript 是什么意思

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

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

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

    JavaScript深入介紹WebAPI的用法

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

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

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

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

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

最新評論