0

私は javascript を初めて使用しますが、今は javascript でナビゲーションを作成する必要があります。ナビゲーションはそのように見えるはずです。 http://s7.directupload.net/file/d/3332/rp9cuury_jpg.htm

「ホーム」をクリックすると、ホームの「ボタン」が少し右に移動するはずです。次に、[自己紹介] ボタンをクリックすると、ホーム ボタンが戻り、[自己紹介] ボタンが右に移動します。残りのナビゲーションも同様です。ボタンをクリックするたびに右に移動し、別のボタンをクリックするとすぐに戻り、このボタンは右に移動します。

適切な px 番号をまだ入力していませんが、既にそのための JavaScript コードを作成しており、問題が発生しています。「ホーム」をクリックすると、ホーム div の代わりにフッター div (下部の黒いバー) が移動します。そして、それを修正する方法がわかりません。フッター div を完全に削除するとすぐに、クリックしても何も起こりません。多分誰かがそれで私を助けることができますか？

CSS コードも必要かどうかはわかりませんが、ここまでは JavaScript と HTML コードです。

$(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);});
}

そして、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 -->
4

1 に答える 1

0

この fiddleのようなものを試してください。HTML の各ボタンに nav-button クラスを追加すると、すべてのボタンに動作を適用しやすくなります。のエイリアスである$(window).load()forも切り替えました。で何を達成しようとしていたのかわかりませんが、このコードは、クリックされたときにナビゲーションボタンの左マージンをアニメーション化するだけです:$(function () {})$(document).ready()$("div")

$(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);});
}
于 2013-07-29T22:31:41.903 に答える