suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiel eines JavaScript-gesteuerten Navigationsmenüs

Beispiel eines JavaScript-gesteuerten Navigationsmenüs

黄舟
黄舟Original
2017-07-25 09:18:291266Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode des von js gesteuerten Navigationsmenüs vorgestellt. Ich hoffe, dass er für alle hilfreich ist Skripte und Stile, es ist ein sehr guter Lerninhalt für Anfänger:

Dieser kleine Code wurde verwendet, um dieses Menü zu sortieren, während wir uns Strictly Come Dancing ansehen. Sobald Sie es wissen , Sie können die Vergangenheit Revue passieren lassen und Neues lernen. Sie können aus der Idee lernen. Tatsächlich möchte ich diese Front-End-Idee verbessern und sie nicht mehr ungewohnt machen:

Dies ist der Menüteil der asp.net-Masterseite

Html-Teil: 



<%@ 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>
<p 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">医院概况</a>
     <a href="Culturelist.aspx?menutemp=2">医院文化</a>
     <a href="Tumor dynamic list.aspx?menutemp=3">医院动态</a>
     <a href="Services list .aspx?menutemp=4">医院服务</a>
     <a href="Medical guidelines.aspx?menutemp=5">就诊指南</a>
     <a href="Introduce department.aspx?menutemp=6">科室介绍</a>
</p>
</body>       
</html>
Schauen Sie sich das CSS an Teil. Dies dient dazu, das ausgewählte Element von anderen Elementen zu unterscheiden:


Das Folgende ist der js-Teil, der HTML zum Leben erweckt und die Webseite bewegt: 
#master .head .nav a.check{ background:url(../images/navbg.png) 1px 1px no-repeat; color:#fff;}


$(document).ready(function () {//表示要在网页加载之后运行
    var current = $("#masterid").val();//通过jquery方式获取id=masterid的页面元素的值，其实就是为了获取选中的那个菜单
    var alist = new Array();//定义数组
    if (current == "") {//要是没有获取到选中的菜单，我们就忽略这个
        current = -1;
    }
    $("#nav>a").each(function (i, items) {//这个部分就是在你点击了菜单一项后，还么有刷新页面时候的样式变化，哈哈，each是一个遍历函数，会遍历#nav>a的集合。
        alist[i] = $(items);//i是从0开始到遍历集合结束为止，自增1的
        $(alist[i]).click(function () {//对alist[i]进行注册点击事件，点击就会执行对应的方法，
            if (i != current) {//要是选择了不同的菜单项，就会给选择的菜单加上应有的样式，而之前的就会去除样式
                $(this).addClass("check");
                $(alist[current]).removeClass("check");
                current = i;//返回新选择的菜单项id
            }
        });
    });
    $("#nav>a").each(function (i, items) {//这是在页面跳转到新页面后对页面样式的处理，让菜单的样式正确调用。
        alist[i] = $(items);
        if (i != current) {
            $(alist[i]).removeClass("check");
        }
    });
    $(alist[current]).addClass("check");
});
Okay, du kannst es schnell versuchen.

Das obige ist der detaillierte Inhalt vonBeispiel eines JavaScript-gesteuerten Navigationsmenüs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung und Verwendung des Treeview-Plug-Ins in BootstrapNächster Artikel：Einführung und Verwendung des Treeview-Plug-Ins in Bootstrap

In Verbindung stehende Artikel

Mehr sehen