Question

so i am a begginer and i really need help
so i wrote this function down here;
the objective was to take as parameters an element name , a div tag selector and a php file address,

function navigation($nav,$container,$link)
{ 


 $($nav).click(function(){
    $($container).slideUp(500,function(e){
    $(this).append("<span>");
    $(this).load($link);
    });
  });
  {
  $($container).ajaxComplete(function(){
  $(this).slideDown(500);
});
  }
  {
    $($container).slideUp(500);
  }
}

the usage is simple

    navigation("#home",".content","home.php");
   navigation("#about",".content","about.php");
    navigation("#store",".content","right.php");

the html is just a few <div> one with class=".content" tag and <a> links called #home #about #store the pages in php are just plain html inside them;

---

now the problem is when i click the link it works but i can find how to make he active link unclickable after it becomes active
and i was about to do a sublist with the same function trying to load a little div under the navigation links that contain links but i cant find how to do
any one of pro’s have any idea ???

Answer 1

I can help but it’s going to be quite a rewrite.

Firstly, give all your navigation items a class. Inside the nav items (I don’t know if they’re div, li elements or whatever, put an <a> tag with the src set to the page you want the navigation to load. When done it might look something like below:

<ul id="navigation">
    <li class="nav">
        <a src="home.php">HOME</a>
    </li>
    <li class="nav">
        <a src="about.php">ABOUT</a>
    </li>
    <li class="nav">
        <a src="right.php">RIGHT</a>
    </li>
</ul>

Then use jQuery’s onload functionality to bind the click event onload, rather than calling your navigation function 3 times. You grab the src from the child <a> tag of the li clicked.

$(function()
{
    $('.nav').click(function()
    {
        if($(this).hasClass('active'))
        {
            return false;
        }
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');

        $('.content').slideUp(500).load($(this).children('a').attr('src'), 
            null,
            function(){$(this).slideDown(500);}
        );
        return false;
    });
});

Note the return false; is important to prevent the default action of the link (i.e. sending the user to the other page).