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

试试这样的小提琴。为 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 回答