使用ajax进行菜单导航

Question

i'm trying to make a website with some content loaded in the div #main, using ajax, but i do not manage to define a current class for the selected item in the menu.

    <nav id="menu">
      <ul>
        <li>
          <a href="pages/qui.php" 
             rel="address:/Qui" 
             title="Qui suis-je?" 
             class="qui ajax">
             Qui suis-je? &nbsp;&nbsp;
          </a>
        </li>
        <li>
          <a href="pages/portfolio.php" 
             rel="address:/portfolio" 
             title="Portfolio" 
             class="portfolio ajax">
             Portfolio &nbsp; &nbsp;
          </a> 
        </li>
        <li>
          <a href="pages/contact.php" 
             rel="address:/contact" 
             title="Contact" 
             class="contact ajax">
             Contact &nbsp; &nbsp;
          </a>
        </li>
      </ul>
    </nav>

I'm using the asual jquery plugin to enable the user back button (maybe there is a way to use this plugin to define the current element clicked in the menu, in jquery)

So...i'm not good at all in jquery so please if someone can help, it will be great.

Answer 1

So if I get you right, you want to find out the current button clicked in the menue?

$(document).ready(function(){
    $('.ajax').click(function(){
        if($(this).hasClass('qui')) {
            alert('qui was clicked');
        }

        if($(this).hasClass('portfolio')) {
            alert('portfolio was clicked');
        }


        if($(this).hasClass('contact')) {
            alert('contact was clicked');
        }
    });
});

In this example, the menu button is distinguished by the class, which sure isn't the best way to do it. But you get the idea how to identify the button that was clicked.

It's sufficient though, if you don't want to manipulate the button (e.g. add/remove CSS) but only want to make the request:

$(document).ready(function(){
    $('.ajax').click(function(event){
        event.preventDefault(); //prevent the <a> tag from calling its href

        //check which button we are dealing with (see example above)
        if($(this).hasClass('portfolio')) {
            alert('portfolio was clicked');
            //we can add a css-class
            $(this).addClass('portfolio-hover');
            //or we can add single css-attributes:
            $(this).css('background-color', 'red');
        }

       var page_to_be_loaded = $(this).attr('href');
        $.get(page_to_be_loaded, function(data) {
            //data contains everything that the called php-file has outputted
            $('#main').html(data);
        });
    });
});

Just have a look at the jQuery Documentation. You also should add an id to the links so you have something to identify them exactly:

<li>
  <a href="pages/qui.php"
     id="nav_qui"
     rel="address:/Qui" 
     title="Qui suis-je?" 
     class="qui ajax">
     Qui suis-je? &nbsp;&nbsp;
  </a>
</li>

//....
if($(this).attr('id')=='nav_qui') {
  alert('qui was clicked');
}
//....