使用带有2个菜单的jQuery突出显示菜单项

时间:2012-04-17 03:49:31

标签: jquery

我有2个菜单正在进行中。一个在标题中;另一个显示在页面的左侧边栏上。

标题

<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>

ON BASEBALL 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 - 我使用jQuery显示/隐藏每个-li-的内容

2 - 当页面最初加载时,#topmenu项目会被突出显示,但我也希望#leftmenu中的第一项也被突出显示。换句话说,我希望在选择#topmenu项目时以及选择第一个#leftmenu项目时显示相同的页面。我怎样才能实现这一目标?

如果有帮助,棒球页面设置如下:

Baseball.php

<div id="header">
</div>

<div id="main">
<?php include('baseball_stuff.php'); ?>
</div>

<div id="footer">
</div>

然后我链接到#topmenu中的baseball.php并链接到#leftmenu中的baseball_stuff.php,所以我不必复制内容。

jsfiddle:http://jsfiddle.net/Ft8FR/

1 个答案:

答案 0 :(得分:1)

这部分问题对我没有任何意义

  

我想在选择#topmenu项目时显示相同的页面,   当选择第一个#leftmenu项目时我怎么能做到这一点   发生?

你之前说过的话确实有意义。所以我会回答这个问题,并希望这是你正在寻找的。

  

我还希望#leftmenu中的第一项突出显示

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