Question

I have a menu with a (links) tags. In Jquery I’m handling click event at the parts of menu (a) and then show down content block. Everything is ok, but now I want to make possibility have links in content into another parts of menu.

<div id="head_menu">
   <a href="#order">1</a>
   <a href="#portfolio">2</a>
   <a href="#contacts">3</a>
   <a href="#vacancies">4</a>
   <a href="#about">5</a>
</div>

$('#head_menu a').click(function(){
   currentPage = this.href.split( '#' )[1];

   // If content area is already opened - close it
   if( $('#text').is(':visible') )
   {
      $('#text').slideUp();
   }

   $("#inner").load( 'static_page.php?page=' + currentPage, function() {
      $('#text').slideDown();
   });
});

Here I just open content window with need text, when menu is clicked. So, now I want to have a link in content to another menu part:

<div id="inner"><a href="#about">link text</a></div>

Here is JQuery code:

$('#inner a').live( 'click', function() {
 $('#head_menu a[href*=' + document.location.hash + ']').click();
});

And after 1st clicking current content menu is hiding and than showing with the same content, but after 2nd clickin I get that, what I want: new content due to clicked menu is opening. Why does it wrok only after 2nd click?

Answer 1

document.location is changed after the first click (this makes sense when you think about it, as you can use JavaScript to cancel clicks).
Try something similar to what you did on the other function (assuming it works, and consider moving it to a function – this is duplicated code):

$('#inner a').live( 'click', function() {
   var target = this.href.split('#')[1];
   $('#head_menu a[href*=' + target  + ']').click();
});