Question

I’ve got 2 menus going on. One is in the header; the other shows up on the left sidebar of the page.

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>

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>

Here’s how I highlight the #topmenu (long story, but it works):

  $(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');
            }
        });
   });

The challenge is with the #leftmenu:

1 – I’m showing/hiding content from each -li- using jQuery

2 – When the page initially loads, the #topmenu item is higlighted, but I also want the first item in #leftmenu to be highlighted also. In other words, I want the same page to appear when the #topmenu item is selected, and when the first #leftmenu item is selected. How can I make this happen?

If it helps, the baseball page is setup like so:

Baseball.php

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

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

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

Then I link to baseball.php in the #topmenu and link to baseball_stuff.php in the #leftmenu, so I don’t have to duplicate the content.

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

Answer 1

This part of your question doesn’t make any sense to me

I want the same page to appear when the #topmenu item is selected,
and when the first #leftmenu item is selected. How can I make this
happen?

What you said earlier does make sense though. So I will answer this and hope it is what you are looking for.

I also want the first item in #leftmenu to be highlighted

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