我有2個菜單正在進行。一個在頭上;另一個顯示在頁面的左側。使用帶有2個菜單的jQuery高亮菜單項
HEADER
<div id="topmenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/baseball">Baseball</a></li>
<li><a href="/football">Football</a></li>
</ul>
</div>
棒球PAGE
<div id="leftmenu">
<ul id="teams">
<li><a href="/yankees">Yankees</a></li><br />
<li><a href="/redsox">Red Sox</a></li><br />
<li><a href="/cubs">Cubs</a></li><br />
</ul>
</div>
下面是如何突出#topmenu(長的故事,但它的工作原理):
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('#topmenu li a').each(function(){
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('blue');
}
});
});
的挑戰是與# leftmenu:
1 - 我顯示/隱藏從每個內容-li-使用jQuery
2 - 當頁面最初加載時,#topmenu項目亮顯,但我也想在#中的第一項左側菜單也要突出顯示。換句話說,我希望在選擇#topmenu項目時以及選擇第一個#leftmenu項目時出現相同的頁面。我怎樣才能做到這一點?
如果有幫助,棒球頁面設置像這樣:
Baseball.php
<div id="header">
</div>
<div id="main">
<?php include('baseball_stuff.php'); ?>
</div>
<div id="footer">
</div>
然後我鏈接在#topmenu並鏈接到baseball.php到baseball_stuff.php在#leftmenu中,所以我不必複製內容。
的jsfiddle:http://jsfiddle.net/Ft8FR/
感謝;我接受了你的答案。這就是我需要的。 – chowwy 2012-04-18 14:09:58