在一個鏈接上運行jQuery和JavaScript（不是按鈕）

-2

我想用一個鏈接運行jQuery和Javascript代碼。基本上，導航欄將在屏幕中間開始，然後一旦點擊了菜單，導航欄和徽標就會動畫到頂部，並且該頁面的內容將出現。誰能幫我？在一個鏈接上運行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>

來源

2012-10-29 Steve Aylward

jQuery ***是***純JavaScript，你知道的。 – Sparky

對不起，我只是這個東西的初學者！ –

一個選項是刪除您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-29 14:07:41

在一個鏈接上運行jQuery和JavaScript（不是按鈕）

回答

相關問題