يتم التحكم في تأثير القائمة هذا من خلال البرامج النصية والأنماط، وهو محتوى تعليمي جيد جدًا للمبتدئين:
دعونا نلقي نظرة على هذا الرمز الصغير لفرز هذه القائمة أثناء مشاهدة Strictly Come Dancing الليلة الماضية. إذا كنت تعرفه، فيمكنك مراجعة الماضي وتعلم أشياء جديدة. وإذا كنت لا تعرفه، فيمكنك التعلم منه. في الواقع، أريد فقط تحسين فكرة الواجهة الأمامية هذه حتى لا يلزم استخدامها مرة أخرى:
هذا هو جزء القائمة في صفحة asp.net الرئيسية
جزء أتش تي أم أل:
انسخ رمز الكود كما يلي:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" يرث = "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">
<رئيس التشغيل = "الخادم">
<العنوان></العنوان>
<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>
</الرأس>
<الجسم>
<div معرف = "التنقل">
<input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
<a href="Default.aspx?menutemp=0">الصفحة الرئيسية</a>
<a href="surveylist.aspx?menutemp=1">نظرة عامة على المستشفى</a>
<a href="Culturelist.aspx?menutemp=2">ثقافة المستشفى</a>
<a href="Tumordynamic list.aspx?menutemp=3">أخبار المستشفى</a>
<a href="قائمة الخدمات .aspx?menutemp=4">خدمات المستشفى</a>
<a href="Medical Guidelines.aspx?menutemp=5">إرشادات طبية</a>
<a href="Introduce Department.aspx?menutemp=6">مقدمة عن القسم</a>
</div>
</الجسم>
</html>
قم بإلقاء نظرة على جزء CSS لتمييز العنصر المحدد عن العناصر الأخرى:
#master .head .nav a.check{ الخلفية:url(../images/navbg.png) 1px 1px no-repeat؛}
فيما يلي جزء js الذي يعطي الحياة لـ html ويجعل صفحة الويب تتحرك:
انسخ رمز الكود كما يلي:
$(document).ready(function () {// يشير إلى أنه يجب تشغيله بعد تحميل صفحة الويب
var current = $("#masterid").val();// احصل على قيمة عنصر الصفحة بالمعرف=masterid من خلال jquery، في الواقع، هو الحصول على القائمة المحددة
var alist = new Array(); // تحديد المصفوفة
if (current == "") {// إذا لم يتم الحصول على القائمة المحددة، فسوف نتجاهل ذلك
الحالي = -1؛
}
$("#nav>a").each(function (i, items) {// هذا الجزء يدور حول تغيير النمط عند تحديث الصفحة بعد النقر فوق عنصر القائمة، هاها، كل منها عبارة عن وظيفة اجتياز، سوف اجتياز مجموعة #nav>a.
alist[i] = $(items);// i يبدأ من 0 ويزيد بمقدار 1 حتى نهاية المجموعة التي تم اجتيازها
$(alist[i]).click(function () {// سجل حدث النقر لـ alist[i]، وسيتم تنفيذ الطريقة المقابلة عند النقر عليه.
if (i != current) {// إذا تم تحديد عنصر قائمة مختلف، فستتم إضافة القائمة المحددة بالنمط المناسب، وستتم إزالة النمط السابق.
$(this).addClass("الاختيار");
$(alist[current]).removeClass("check");
current = i;// إرجاع معرف عنصر القائمة المحدد حديثًا
}
});
});
$("#nav>a").each(function (i, items) {// هذه هي معالجة نمط الصفحة بعد انتقال الصفحة إلى صفحة جديدة، بحيث يمكن استدعاء نمط القائمة بشكل صحيح.
alist[i] = $(items);
إذا (أنا ! = الحالي) {
$(alist[i]).removeClass("check");
}
});
$(alist[current]).addClass("check");
});
حسنًا، يمكنك تجربتها بسرعة.