2012-04-17 83 views
0

我有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/

回答

1

你的問題的這部分沒有任何意義,我

我想在同一個頁面時,#topmenu項目被選中, 出現,當第一選擇#leftmenu項目。我怎樣才能使這個 發生?

你剛纔所說的確有意義。所以我會回答這個問題,並希望這是你正在尋找的。

我也想在#leftmenu的第一個項目加以強調

$('#leftmenu li:first').addClass('blue'); 
+0

感謝;我接受了你的答案。這就是我需要的。 – chowwy 2012-04-18 14:09:58