2012-04-17 102 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