Javascript Click.function not working

Question

I'm new to javascript but now I need to make a navigation with javascript . The navigation is supposed to look like that. http://s7.directupload.net/file/d/3332/rp9cuury_jpg.htm

If you click on "Home", the home "button" should move to the right a bit. Then when you click on the "About me" button the Home button should go back and the About me button moves to the right...and so on with the rest of the navigation. Everytime you click on a button it should move to the right and as soon as you click another button it should go back and this button goes to the right.

I didn't put the right px numbers yet, but I already build a javascript code for it and it's causing me problems. When I click on "Home" the footer div (the black bar at the bottom) is moving instead of the home div. And I have no idea how to fix that. As soon as I delete the footer div completely, nothing is happening at all when I click on it. Maybe someone can help me with that?

I don't know if you need the CSS code as well but so far here's the javascript and the html code.

$(window).load(einblenden);

function einblenden(){
$("#navi_home").click(moving1); 
}

function moving1(){
$("div").animate({"right":"500px"},300);
$("#navi_home").animate({"right":"200px"},300);
inhalt(1); }


function inhalt(nr){
$("#inhalt").load("seite"+nr+".html", function(){ $(this).fadeOut(0).fadeIn(600);});
}

And the html

  <div id="wrapper">

  <div id="logo">
        <a href="index.html"><img src="img/logo.png" alt="logo" /></a>
    </div> <!-- End Logo -->

    <div id="navi_home">Home</div>
    <div id="navi_about">About me</div>
    <div id="navi_portfolio">Portfolio</div>
    <div id="navi_contact">Contact</div>


    <div class="clear"></div> 

<div id="content">

  <p id="inhalt"> </p>

  </div> <!-- End Content -->

<div id="footer">

  </div> <!-- End Footer -->

   </div> <!-- End Wrapper -->

Answer 1

Try something like this fiddle . Adding a nav-button class to each button in the html will make it easier to apply the behavior to all of them. I also switched out your $(window).load() for $(function () {}) , which is an alias of $(document).ready() . I'm not sure what you were trying to accomplish with $("div") , but this code just animates the left margin of any nav-button when clicked:

$(function () { 
    einblenden();
});

function einblenden() {
    $(".nav-button").click(function() {
        $(".nav-button").animate({"margin-left":0},300);
        $(this).animate({"margin-left":200},300);
        inhalt(1);
    });
}

function inhalt(nr) {
    $("#inhalt").load("seite"+nr+".html", function(){ $(this).fadeOut(0).fadeIn(600);});
}