Efek menu ini dikontrol melalui skrip dan gaya, yang merupakan konten pembelajaran yang sangat baik untuk pemula:
Mari kita lihat kode kecil untuk memilah menu ini sambil menonton Strictly Come Dancing tadi malam. Jika Anda mengetahuinya, Anda bisa meninjau masa lalu dan mempelajari hal baru. Sebenarnya saya hanya ingin menyempurnakan ide front-end ini agar tidak perlu digunakan Stranger lagi:
Ini adalah bagian menu dari halaman master asp.net
Bagian HTML:
Copy kode kodenya sebagai berikut:
<%@ 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">
<judul></judul>
<link type="text/css" rel="Stylesheet" href="Styles/master.css" />
<skrip src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<skrip src="Scripts/nav.js" type="text/javascript"></script>
</kepala>
<tubuh>
<div id="nav">
<input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
<a href="Default.aspx?menutemp=0">Beranda</a>
<a href="surveylist.aspx?menutemp=1">Ikhtisar Rumah Sakit</a>
<a href="Culturelist.aspx?menutemp=2">Budaya Rumah Sakit</a>
<a href="Tumor Dynamic List.aspx?menutemp=3">Berita Rumah Sakit</a>
<a href="Daftar layanan .aspx?menutemp=4">Layanan Rumah Sakit</a>
<a href="Pedoman medis.aspx?menutemp=5">Pedoman medis</a>
<a href="Perkenalkan department.aspx?menutemp=6">Pengenalan Departemen</a>
</div>
</tubuh>
</html>
Lihatlah bagian css. Ini untuk membedakan item yang dipilih dari item lainnya:
#master .head .nav a.check{ background:url(../images/navbg.png) 1px 1px tanpa pengulangan warna:#fff;}
Berikut bagian js yang menghidupkan html dan membuat halaman web bergerak:
Copy kode kodenya sebagai berikut:
$(document).ready(function () {//Menunjukkan bahwa ini harus dijalankan setelah halaman web dimuat
var current = $("#masterid").val();//Dapatkan nilai elemen halaman dengan id=masterid melalui jquery, sebenarnya untuk mendapatkan menu yang dipilih
var alist = Array baru(); //Definisikan array
if (current == "") {//Jika menu yang dipilih tidak diperoleh, kami akan mengabaikannya
saat ini = -1;
}
$("#nav>a").each(function (i, items) {//Bagian ini tentang perubahan gaya ketika Anda menyegarkan halaman setelah Anda mengklik item menu, haha, masing-masing adalah fungsi traversal, akan melintasi koleksi #nav>a.
alist[i] = $(items);//i dimulai dari 0 dan bertambah 1 hingga akhir koleksi yang dilalui
$(alist[i]).click(function () {//Daftarkan event klik untuk alist[i], dan metode terkait akan dieksekusi saat diklik.
if (i != current) {//Jika item menu berbeda dipilih, menu yang dipilih akan ditambahkan dengan gaya yang sesuai, dan gaya sebelumnya akan dihapus.
$(ini).addClass("periksa");
$(alist[saat ini]).removeClass("periksa");
current = i;//Kembalikan id item menu yang baru dipilih
}
});
});
$("#nav>a").each(function (i, items) {//Ini adalah pemrosesan gaya halaman setelah halaman melompat ke halaman baru, sehingga gaya menu dapat dipanggil dengan benar.
daftar[i] = $(item);
jika (saya != saat ini) {
$(alist[i]).removeClass("periksa");
}
});
$(daftar[saat ini]).addClass("periksa");
});
Oke, Anda bisa mencobanya dengan cepat.