Wiederverwendung von Code für die aktive Verbindung von Menü zeigt

Question

Code für

wird

<ul class="menu"> 
<li class="top"><a href="index.jsp" class="active_link"><span>Home</span></a></li> 
<li class="top"><a href="#" class="top_link"><span class="down">Police Station</span></a> 
<ul class="sub"> 
<li><a href="VPolicestation.jsp">Add New Station</a></li> 
<li><a href="javascript:searchVPS()">Update Station</a></li> 
</ul> 
</li> 
<li class="top"><a href="#" class="top_link"><span class="down">Police Officer</span></a> 
<ul class="sub"> 
<li><a href="addOfficer.jsp">Add New Officer</a></li> 
<li><a href="assignStation.jsp">Assign Station</a></li> 
<li><a href="javascript:searchOfficer()">Update Officer</a></li> 
</ul> 
</li>         
<li class="top"><a href="#" class="top_link"><span class="down">Report</span></a> 
<ul class="sub"> 
<li><a href="#">Crime Report</a></li> 
<li><a href="#">Citizen Report</a></li> 
</ul> 
</li>         
<li class="top"><a href="logout.jsp" class="top_link"><span>Logout</span></a></li> 
</ul> 

menu.css

.bg {background: url(images/button4.gif);} 
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; } 
.menu li.top {display:block; float:left; position:relative;} 
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;} 
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;} 
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;} 
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;} 
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;} 
.menu li a.top_link:hover span.down {background:url(images/button4.gif) no-repeat right top;} 

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;} 
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;} 
.menu li:hover > a.top_link span.down {background:url(images/button4.gif) no-repeat right top;} 


.menu li a.active_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;} 
.menu li a.active_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;} 
.menu li a.active_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;} 
.menu li > a.active_link {color:#000; background: url(images/button4.gif) no-repeat;} 
.menu li > a.active_link span {background:url(images/button4.gif) no-repeat right top;} 
.menu li > a.active_link span.down {background:url(images/button4.gif) no-repeat right top;} 

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} 

.menu a:hover {visibility:visible;} 
.menu li:hover {position:relative; z-index:200;} 

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul, 
.menu :hover ul :hover ul :hover ul ul, 
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} 

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:150px; height:auto;} 
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:150px;} 
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:148px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;} 
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;} 
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;} 
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul :hover ul :hover ul 
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;} 

in dieser Codeklasse active_link für das Menü in HTML verwendet Erstellen zeigt die aktuelle Seite gehört zu den jeweiligen Menüoption, und top_link Klasse wird verwendet, um einfache Form des Menüs zu zeigen. Dann wird die Klasse down verwendet, um den Unterlink unter dem jeweiligen Menü anzuzeigen. Jetzt möchte ich das aktuelle aktive Menü anzeigen, zu dem die bestimmte Seite gehört.

Ex: wenn ich in addOfficer.jsp Seite bin, dann sollte Polizist Link, um die aktive zeigen.

Um dies zu erreichen, ich bin einfügen den gleichen Code in jeder Seiten, und nur Namen zu ändern Klasse top_link zu active_link. Und es erhöht die Länge des Codes. Brauchen Sie Hilfe, um dieses Problem zu lösen. Danke im Voraus !!

Screenshot des Menüs.

Answer 1

Ohne Ihren Code wieder einzufügen. Angenommen, wir wollen „Polizist“ auf die Registerkarte aktiv sein, können wir eine ‚aktive‘ Klasse zum a-Tag hinzu:

<li class="top"><a href="#" class="top_link active"><span class="down">Police Officer</span></a> 

Die CSS so etwas wie das sein könnte (was die Schwebe- und aktive Zustände ähnlich):

.menu li:hover a.top_link, 
.menu li a.top_link:hover, 
.menu li a.top_link.active {color:#000; background: url(images/button4.gif) no-repeat;} 
.menu li:hover a.top_link span, 
.menu li a.top_link:hover span, 
.menu li a.top_link.active span {background:url(images/button4.gif) no-repeat right top;} 
.menu li:hover a.top_link span.down, 
.menu li a.top_link:hover span.down, 
.menu li a.top_link.active span.down {background:url(images/button4.gif) no-repeat right top;} 

In Bezug auf die active_link CSS wird nicht mehr benötigt. Beachten Sie, dass ich auch die beiden Hover-Zustände kombiniert habe. Dachte, es würde dir helfen, noch mehr Styling-Code wiederzuverwenden.