-2

1 つのリンクを使用して jQuery と Javascript の両方のコードを実行しようとしています。基本的に、ナビゲーション バーは画面の中央から始まり、メニューをクリックすると、ナビゲーション バーとロゴがアニメーションで上部に表示され、そのページのコンテンツが表示されます。誰でも私を助けることができますか？

私はただの初心者なので、私の知識は非常に悪いと言っていいですか! どんな助けでも大歓迎です！

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <title>****</title>
    <link href="design/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/jquery" src="design/scripts/jquery.js"> </script>
    <script type="text/javascript" src="design/scripts/homes.js"> </script>
        <script>
        $(document).ready(function(){
        $(".topPage").click(function(){
        $("#headingBlock").animate({marginTop:"=0px"});
         });
         $("#midPage").click(function(){
     $("#headingBlock").animate({marginTop:"=150px"});
     });
    });
    </script>

</head>
<body>
    <div id="headingBlock">
    <div id="logo">
    <a href="index.html"> <img src="design/images/pmb_logo.png" alt="****"/>
    </a>
    </div>
    </div>

<div id="navStrip">
    <div id="navBlock">
    <div id="nav">
        <a href="index.html" id="midPage">Home</a>
        <a href="#" class="topPage" onclick="switchMain1()">Our Homes</a>
        <a href="#" class="topPage" onclick="switchMain2()">Displays</a>
        <a href="#" class="topPage" onclick="switchMain3()">Where we build</a>
        <a href="#" class="topPage" onclick="switchMain4()">Why PMB?</a>
        <a href="#" class="topPage" onclick="switchMain5()">Style</a>
        <a href="#" class="topPage" onclick="switchMain6()">Contact Us</a>
     </div>
    </div>
</div>

<div id="mainContainerHomes" style="visibility:hidden">

<div class="mainContent" > 

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
when an unknown printer took a galley of type and scrambled it to make a type <br>
specimen book. It has survived not only five centuries, but also the leap into <br>
electronic typesetting, remaining essentially unchanged. It was popularised in the <br>
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more <br>
recently with desktop publishing software like Aldus PageMaker including versions of <br>
Lorem Ipsum. </p>

</div>

</div>


<div id="mainContainerDesign" style="visibility:hidden">

<div class="mainContent" > 

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
when an unknown printer took a galley of type and scrambled it to make a type <br>
specimen book. It has survived not only five centuries, but also the leap into <br>
electronic typesetting, remaining essentially unchanged. It was popularised in the <br>
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more <br>
recently with desktop publishing software like Aldus PageMaker including versions of <br>
Lorem Ipsum. </p>

</div>

</div>

<div id="footer">

<h1> Designed by *** </a> </h1>

</div>

</body>

4

1 に答える 1

1

1つのオプションは、を削除してonclick="..."これを試すことです：

jQuery(document).ready(function($){
    $(".topPage").click(function(){
        $("#headingBlock").animate({marginTop:"0px"});
        switchMain($(this).index());
        return false; // stop propagation and page jump
    });
    $("#midPage").click(function(){
         $("#headingBlock").animate({marginTop:"150px"});
    });
});

switchMain次に、渡されたインデックスに基づいて各 1-6 が行うことを行うシングルを作成します (この例では 0-6 になります)。

于 2012-10-29T14:07:41.863 に答える