เอฟเฟกต์เมนูนี้ควบคุมผ่านสคริปต์และสไตล์ ซึ่งเป็นเนื้อหาการเรียนรู้ที่ดีมากสำหรับมือใหม่:
มาดูโค้ดเล็กๆ นี้เพื่อแยกแยะเมนูนี้ระหว่างดู Strictly Come Dancing เมื่อคืนนี้กัน ถ้ารู้ก็ทบทวนอดีตและเรียนรู้สิ่งใหม่ๆ ได้เลย ถ้าไม่รู้ก็เรียนรู้จากมันได้ จริงๆ แล้ว ฉันแค่ต้องการปรับปรุงแนวคิดส่วนหน้านี้ เพื่อจะได้ไม่ต้องนำมันกลับมาใช้อีก
นี่คือส่วนเมนูของหน้าต้นแบบ asp.net
ส่วน HTML:
คัดลอกรหัสรหัสดังต่อไปนี้:
<%@ ภาษาหลัก = "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">
<หัว runat="เซิร์ฟเวอร์">
<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>
</หัว>
<ร่างกาย>
<div id="nav">
<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="Tumor dynamic list.aspx?menutemp=3">ข่าวโรงพยาบาล</a>
<a href="รายการบริการ .aspx?menutemp=4">บริการของโรงพยาบาล</a>
<a href="แนวปฏิบัติทางการแพทย์.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; color:#fff;}
ต่อไปนี้เป็นส่วน js ที่ให้ชีวิตกับ html และทำให้หน้าเว็บเคลื่อนไหว:
คัดลอกรหัสรหัสดังต่อไปนี้:
$(document).ready(function () {//ระบุว่าควรรันหลังจากโหลดหน้าเว็บแล้ว
var current = $("#masterid").val();//รับค่าขององค์ประกอบของหน้าด้วย id=masterid ผ่าน jquery จริงๆ แล้วมันคือการรับเมนูที่เลือก
var alist = new Array(); //กำหนด array
if (current == "") {//หากไม่ได้รับเมนูที่เลือก เราจะเพิกเฉยต่อสิ่งนี้
ปัจจุบัน = -1;
-
$("#nav>a").each(function (i, items) {//ส่วนนี้เป็นเรื่องเกี่ยวกับการเปลี่ยนสไตล์เมื่อคุณรีเฟรชหน้าหลังจากที่คุณคลิกที่รายการเมนู 555 แต่ละอันเป็นฟังก์ชัน traversal จะ สำรวจคอลเลกชันของ #nav>a
alist[i] = $(items);//i เริ่มจาก 0 และเพิ่มขึ้น 1 จนกระทั่งสิ้นสุดคอลเลกชันที่สำรวจ
$(alist[i]).click(function () {//ลงทะเบียนเหตุการณ์การคลิกสำหรับ alist[i] และวิธีการที่เกี่ยวข้องจะถูกดำเนินการเมื่อคลิก
if (i != current) {//หากเลือกรายการเมนูอื่น เมนูที่เลือกจะถูกเพิ่มด้วยสไตล์ที่เหมาะสม และสไตล์ก่อนหน้าจะถูกลบออก
$(this).addClass("ตรวจสอบ");
$(alist[ปัจจุบัน]).removeClass("ตรวจสอบ");
ปัจจุบัน = i;//ส่งคืนรหัสรายการเมนูที่เลือกใหม่
-
-
-
$("#nav>a").each(function (i, items) {//นี่คือการประมวลผลรูปแบบเพจหลังจากที่เพจข้ามไปยังหน้าใหม่ เพื่อให้สามารถเรียกสไตล์เมนูได้อย่างถูกต้อง
alist[i] = $(รายการ);
ถ้า (i != ปัจจุบัน) {
$(alist[i]).removeClass("ตรวจสอบ");
-
-
$(alist[ปัจจุบัน]).addClass("ตรวจสอบ");
-
โอเค คุณสามารถลองได้อย่างรวดเร็ว