按鈕在我的HTML的某些部分中不起作用

Question

我的HTML頂部和底部附近有一個id="getstarted"按鈕。 頂部附近的按鈕有效，但底部附近的按鈕無效。 它們的格式完全相同。 我希望兩個按鈕都能正常工作。

這是我的代碼。 **編輯代碼。 我添加了onclick="window.location.href = 'getstarted.html';" 我的按鈕。 現在，第一個按鈕可以使用，但是第二個按鈕不能使用。 如何使第二個按鈕起作用？

 $(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 70) { $('#header').fadeIn(500); } else { $('#header').fadeOut(500); } }); }); $(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 70) { $('#pricing').css("color", "#000"); } else { $('#pricing').css("color", "#FFF"); } }); }); // slideshow $(document).ready(function() { $("#laptopslideshop > div:gt(0)").hide(); setInterval(function() { $('#laptopslideshop > div:first') .fadeOut(500) .next() .fadeIn(500) .end() .appendTo('#laptopslideshop'); }, 3000); }); 

 @import url('https://fonts.googleapis.com/css?family=Nunito+Sans'); * { box-sizing: border-box; margin: 0; padding: 0; } #header { position: fixed; top: 0px; width: 100%; height: 84px; background-color: #FFFFFF; color: #000; z-index: 1; display: none; } @media (max-width: 768px) { #header { height: 60px; } } #main { height: 100vh; width: 100%; background: url(Images/teamchat.jpg) no-repeat center; background-size: contain; background-size: cover; } .headerContents { text-align: right; height: 100%; width: 100%; float: right; z-index: 2; position: fixed; } .headerpandc { margin-right: 18%; margin-top: 17px; position: relative; } @media (max-width: 768px) { .headerpandc { margin-right: 4%; margin-top: 14px; } } #pricing { font-family: Nunito Sans; margin-right: 55px; font-weight: 800; letter-spacing: 0.1em; font-size: 18px; text-decoration: none; color: #FFF; transition: 0.6s; } @media (max-width: 768px) { #pricing { font-size: 12px; margin-right: 3%; } } @media (max-width: 355px) { #pricing { display: none; } } #pricing:hover { text-decoration: underline; } #pricing:active { color: #000; } #getstarted { font-family: Nunito Sans; background-color: #5a52ff; border-radius: 10px; border: none; color: white; padding: 11px 25px; text-align: center; font-size: 18px; transition: 0.3s; text-decoration: none; cursor: pointer; font-weight: 800; letter-spacing: 0.05em; outline: none; } @media (max-width: 768px) { #getstarted { padding: 8px 15px; font-size: 12px; } } #getstarted:hover { background-color: #3d33ff; } #getstarted:active { transform: translateY(2px); box-shadow: 0 1px #666; } #telosdesignlogo { float: left; height: 30px; margin-left: 18%; margin-top: 6px; } @media (max-width: 768px) { #telosdesignlogo { margin-left: 4%; height: 23px; } } /*main text*/ #mainbox { height: 470px; width: 500px; text-align: left; position: relative; top: 250px; left: 28%; font-family: Nunito Sans; color: #FFF; } #hitelos { font-size: 2.5em; font-weight: lighter; } #maintext { font-weight: 800; font-size: 3.5em; } #mainpricing { z-index: 5; } /* Laptop slideshow begins */ #laptopslideshop { position: relative; margin-top: 50px; width: 240px; height: 240px; padding: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); } .mySlides { position: absolute; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div id="header"></div> <div class="headerContents"> <div class="headerpandc"> <a id="pricing" href="pricing.html">Pricing</a><button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button> <a href="index.html"><img src="Images/TelosLogo with text.png" href="index.html" alt="TelosDesign" id="telosdesignlogo" /></a> </div> </div> <div id="main"> <div id="mainbox"> <div id="hitelos"> Hi! We're Telos. </div> <div id="maintext"> Beautiful websites tailored to your unique business. </div> <button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button> </div> </div> <div id="laptopslideshop"> <div> <img class="mySlides" src="Images/laptoppic1test.png" alt="Laptop and Phone" /> </div> <div> <img class="mySlides" src="Images/laptoppic2test.png" alt="Laptop and Phone" /> </div> </div> 

Answer 1

id對於一個元素應該唯一（僅一個），請使用class

在代碼中，您使用javascript（jquery）來控制href而不是html，請參見onclick 。

<button id="getstarted" onclick="window.location.href = 'getstarted.html';">

javascript僅考慮第一個元素，因為不應該存在具有相同id其他元素。

-

我看到你也有：

  <script type="text/javascript" src="app.js"></script>

這段代碼在做什么？

檢查Web瀏覽器控制台中是否有其他來源/代碼的JavaScript錯誤。

Answer 2

嘗試使用此代碼

  <a id="pricing" href="http://google.com">Pricing</a> <a href="http://google.com" target="_blank"><button id="getstarted">Get Started</button></a> <a href="index.html"> <img src="Images/TelosLogo with text.png" href="http://google.com" alt="TelosDesign" id="telosdesignlogo"></a>