highlight a link when clicking a diff. link? jQuery

[foevah]

Click this link to see what I am trying to do: http://www.gulaab.co.uk/test/menu.php

 

When you click View Main Courses >>

<a href="#tandoori" class="next">View Main Courses >></a>

it makes all of the menu on the left red.. I just want the next item on the menu to highlight (Tandoori dishes)

<li class="main_courses"><a href="#tandoori" class="selected">Tandoori dishes</a></li>

 

This is the jQuery that makes everything red:

jQuery(function( $ ){
$('a.next').click(function(){
$('#gulaab_menu ul li a').removeClass('selected');
$('#gulaab_menu ul li a').toggleClass('selected');
});
});

 

Any ideas how to get this working so only Tandoori dishes is highlighted and not the whole menu?

[KevinM1]

Click this link to see what I am trying to do: http://www.gulaab.co.uk/test/menu.php

 

When you click View Main Courses >>

<a href="#tandoori" class="next">View Main Courses >></a>

it makes all of the menu on the left red.. I just want the next item on the menu to highlight (Tandoori dishes)

<li class="main_courses"><a href="#tandoori" class="selected">Tandoori dishes</a></li>

 

This is the jQuery that makes everything red:

jQuery(function( $ ){
$('a.next').click(function(){
$('#gulaab_menu ul li a').removeClass('selected');
$('#gulaab_menu ul li a').toggleClass('selected');
});
});

 

Any ideas how to get this working so only Tandoori dishes is highlighted and not the whole menu?

 

You have to remember/learn CSS selectors.  You already have an id of tandoori for the link you want to change.  Just replace the "'#gulaab_menu' ul li a" part with "'#tandoori'".

[foevah]

but i dont just want tandoori to highlight when you click view main courses >>

after clicking view main courses you will see Chief Specialities >> and so when you click Chief Specialities I want Chief Specialities to highlight on the left menu.. You will also see << Starters in the Tandoori page so when you click << Starters I want the Starters link on the left menu to highlight..

 

 

[KevinM1]

Well, the easiest way to do it would be to give each link on the left an id.  Then, in the click function, match that id with the href attribute of the special link.  So, something like:

$('a.next').click(function()
{
   $("'" + $(this).attr('href') + "'").toggleClass("selected"); //you don't need to removeClass...toggle both adds and removes the class from the element.
}
//end jQuery script

.
.
.

<!-- Link in the lefthand menu -->

<li class="main_courses"><a href="#tandoori" id="tandoori" class="selected">Tandoori dishes</a></li>

<!-- Special link at the bottom of your content pane (remains the same) -->

<a href="#tandoori" class="next">View Main Courses >></a>

 

This should work, so long as you give each menu link on the left the same id as the href attribute of the special link.  It works by simple text replacement.  The href attribute is already "#something", so you should just be able to plug that into jQuery as an id reference.

[foevah]

hm slight problem..

when you click view main courses it doesn't move to the tandoori dishes page.. It is being confused with the id tandoori being in two places. There is an id tandoori on the tandoori page so the anchor knows which page to slide to.. Is there a way to add the class selected to the relevant item on the left hand menu when either <<previous or next>> arrows are clicked in the content area?

 

I have uploaded the changed to the link above and heres a break down of whats going on at present:

<script>
jQuery(function( $ ){
$('a.next').click(function()
{
$("'" + $(this).attr('href') + "'").toggleClass("selected")
});
});
</script>

 

 

<li><a href="#tandoori" class="next">View Main Courses >></a></li>[i]// click view main courses and it takes you too tandoori page (this is inside starts.php include same as below)[/i]

 

// this is the tandoori page that it should show after click view main courses note id="tandoori"

<ul id="tandoori" style="position:relative;" class="section mp">
                <?php include('menu/tandoori.php'); ?> [i]//inside this include is content and another one of these like above  <li> <a href="#chief" class="next" style="position:absolute; top:290px;">Chief Specialities >></a></li>[/i]
          </ul>

 

 

<li class="main_courses"><a href="#tandoori" id="tandoori">Tandoori dishes</a></li>[i]//this is the new id="tandoori" that has been added to the left hand menu. It needs to highlight once clicked on view main courses and the same should happen on all >> and << arrows in all content areas to view the previous and next pages..[/i]