ナビゲーションアンカータグは機能しませんが、なぜですか？

私は2ページのウェブサイトを持っています。ホームページには1ページのナビゲーションがあります。 '約'をクリックすると、 '約' divにスクロールされます。ナビゲーションアンカータグは機能しませんが、なぜですか？

PART 1 - index.htmlを

オン 'ブログ' ナビゲーションアイテムがクリックされた場合しかし、それは blog.htmlに行く必要があります。 .header-nav私は次のものを持っています<li><a href="blog.html">Blog</a></li>しかし働いていません。ブラウザでは、リンクがblog.htmlに向けられているが、行っていないことが示されています。

PART 2 - Blog.html

で、blog.html、私はがのindex.htmlから.header-navコードをコピーした - しかし、私はクリックしたときそれ '約' に行くべきホームページとスクロールダウンして、約div - のではない！ コードは動作していますが、index.htmlページにあります。 すべてのアイデアは大いに感謝されます！

Index.htmlと

<header class="main-header"> 
     <div class="header-container"> 
      <!-- logo wrapper --> 
      <div class="logo-wrapper"> 

      <div id="logo-img-name"> 
       <picture> 
        <source class="logo-img" media="(min-width: 320px)" srcset="img/mobile/mobile-logo.jpg"> 
<!--     <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> 
-->     <img class="logo-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> 
       </picture> 
       <p class="logo-name"><a href="index.html">Keeva</a></p> 
          <!-- BURGER NAV --> 

      </div> 


      </div> 

     <a class="burger-nav"></a> 
     </div> 

      <ul class="header-nav"> 
       <li><a id="home" href="#home-View">Home</a></li> 
       <li><a id="about" href="#about-View">About</a></li> 
       <li><a href="blog.html">Blog</a></li> 
       <li><a id="contact" href="#contact-View">Contact</a></li> 
      </ul> 
    </header>

Blog.html

<header class="main-header"> 
     <div class="header-container"> 
      <!-- logo wrapper --> 
      <div class="logo-wrapper"> 

      <div id="logo-img-name"> 
       <picture> 
<!--     <source class="logo-img" media="(min-width: 320px)" srcset="img/mobile/mobile-logo.jpg"> 
--><!--     <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> 
-->     <img class="logo-img" src="img/desktop/images/logo.png" alt="Flowers" style="width:auto;"> 
       </picture> 
       <p class="logo-name"><a href="index.html">Keeva</a></p> 
          <!-- BURGER NAV --> 

      </div> 


      </div> 

     <a class="burger-nav"></a> 
     </div> 

      <ul class="header-nav"> 
       <li><a id="home" href="index.html">Home</a></li> 
       <li><a id="about" href="#about-View">About</a></li> 
       <li><a href="blog.html">Blog</a></li> 
       <li><a id="contact" href="#contact-View">Contact</a></li> 
      </ul> 
    </header>

はJavaScript

$(document).ready(function() { 

    // add a click listener to each <a> tags 
    setBindings(); 

    // burger nav 
    $(".burger-nav").on("click", function() { 
     $(".header-nav").toggleClass("open"); 
    }); 

}); 

/* ONE PAGE NAVIGATION FUNCTION */ 
function setBindings() { 
    $(".header-nav a").click(function(e) { 
     // prevent anchor tags for working (?) 
     e.preventDefault(); 
     var sectionID = e.currentTarget.id + "-View"; 

     $("html, body").animate({ 
      scrollTop: $("#" + sectionID).offset().top 
     }, 1000) 
    }) 
}

全index.htmlを

<!DOCTYPE html> 
<html> 
<head> 
    <title>KEEVA APP</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet"> 
    <!-- extra --> 
<link href="https://fonts.googleapis.com/css?family=Quicksand:700" rel="stylesheet"> 

    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 



    <header class="main-header"> 
     <div class="header-container"> 
      <!-- logo wrapper --> 
      <div class="logo-wrapper"> 

      <div id="logo-img-name"> 
       <picture> 
        <source class="logo-img" media="(min-width: 320px)" srcset="img/mobile/mobile-logo.jpg"> 
<!--     <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> 
-->     <img class="logo-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> 
       </picture> 
       <p class="logo-name"><a href="index.html">Keeva</a></p> 
          <!-- BURGER NAV --> 

      </div> 


      </div> 

     <a class="burger-nav"></a> 
     </div> 

      <ul class="header-nav"> 
       <li><a id="home" href="#home-View">Home</a></li> 
       <li><a id="about" href="#about-View">About</a></li> 
       <li><a href="blog.html">Blog</a></li> 
       <li><a id="contact" href="#contact-View">Contact</a></li> 
      </ul> 
    </header> 
    <div class="main-content"> 
     <div id="home-View" class="sec-1"> 
     <div class="flex-desktop-sec-1"> 
      <div class="col-1"> 
       <h1>Introducing 'Keeva' world's smartest assistant.</h1> 
       <h2>Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</h2> 
      </div> 
      <div class="col-2"> 
      <!-- Download Buttons --> 
       <div class="download-wrap"> 
       <!-- playstore icon --> 
        <picture> 
        <source media="(min-width: 320px)" srcset="img/mobile/mobile-playstore.png"> 
           <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> 
           <img class="download-btns" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> 
       </picture> 
       <!-- appstore icon --> 
        <picture> 
        <source media="(min-width: 320px)" srcset="img/mobile/mobile-appstore.png"> 
           <!-- <source media="(min-width: 465px)" srcset="img/tablet/tablet-hero-iphone.jpg"> --> 
           <img class="download-btns" src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> 
       </picture> 
       </div> 
       </div> 
      </div> 
        <!-- iphone 1 image wrap --> 
       <div class="hero-img"> 
       <!-- iphone image --> 
        <picture> 
<!--          <source media="(min-width: 320px)" srcset="img/desktop/images/home_03.jpg"> 
-->      <img class="phone-img" src="img/desktop/images/home_03.jpg" alt="Flowers"> 
        </picture> 
       </div> 

      </div> 
     </div> 
     <div class="sec-2"> 
      <h3>Say hi to Keeva.</h3> 
      <h4>World’s most smartest personal assistant in your procket.</h4> 

      <!-- ipad 1 image --> 
      <picture id="sec-2-picure"> 
       <!-- <source media="(min-width: 320px)" srcset="img/mobile/mobile-ipad.jpg"> --> 
          <source media="(min-width: 320px)" srcset="img/desktop/images/home_07.jpg"> 
       <img class="phone-img" src="img_orange_flowers.jpg" alt="Flowers" style="width:60%"> 
      </picture>   

     </div> 
     <div class="sec-3"> 
       <!-- iphone image --> 
      <div class="sec-3-flex"> 
      <!-- Iphone 1 image --> 
       <picture id="iphone-sec-3"> 
<!--        <source media="(min-width: 320px)" srcset="img/desktop/images/home_11.jpg"> 
-->     <img id="iphone-2-img" src="img/desktop/images/home_11.jpg" alt="Flowers"> 
       </picture> 
       <div class="sales-copy-wrap"> 
        <h3>Get organized with events, tasks and notes.</h3> 
        <p class="sales-copy">Now more then ever it is critical for smart professionals to stay up to date with important deadlines.</p> 
       </div>    
      </div> 

     </div> 

     <div class="sec-4"> 
       <!-- iphone image --> 
      <div class="sales-copy-wrap"> 
       <h3>Collaborate easily with your team members.</h3> 
       <p class="sales-copy">We understand communication is key to successful execution of your projects. Stay connected and updated.</p> 
      </div> 
      <div class="image-wrapper"> 
       <picture id="iphone-sec-4"> 
<!--        <source media="(min-width: 320px)" srcset="img/desktop/images/home_14.jpg"> 
-->     <img id="iphone-3-img" src="img/desktop/images/home_14.jpg" alt="Flowers"> 
       </picture>    
      </div> 
     </div> 
     <div id="about-View" class="bg-1-wrapper"> 
     <!-- Bg work banner --> 
      <picture> 
       <img id="bg-work-img" src="img/desktop/home1.jpg" alt="Flowers" style="width:100%"> 
      </picture>     
     </div> 

     <div class="sec-5"> 

      <h3 class="about-title"> MEET OUR TEAM </h3> 

      <div class="about-us-section"> 

       <div class="about-wrapper"> 

       <div class="about-flex"> 
        <picture> 
         <img class="founder-img" src="img/desktop/images/home_24.jpg" alt="Flowers"> 
        </picture>    

        <picture> 
         <img class="founder-img" src="img/desktop/images/home_24.jpg" alt="Flowers"> 
        </picture> 
       </div> 

       <div class="founder-names-wrap"> 
        <h5> John M. </h5> 

        <h5> Tyson P. </h5>    
       </div> 

      </div> 

       <div class="about-content"> 
        <div class="section-para"> 
         <p id="founder-headline">The Founders</p>   
         <p class="sales-copy">In the summer of 2012 Mike and Tyson developed the initial concept of Keeva. After researching the market for a solution to their problem they decided to design and build the product from scratch. </p> </br> 
        </div> 
        <div class="section-para"> 
         <p id="founder-headline"> Our Mission </p> 
         <p class="sales-copy">Keeva’s objective is to revolutionize the digital market by enabling young professionals to optmize their work-life.</p>    
        </div> 
       </div> 

      </div>   
     </div> 
<!-- footer --> 
<footer> 
    <div class="box green"> 
       <div class="about-footer"> 
       <h3 class="about-us-title">ABOUT US</h3> 
       <article class="about-article"> 
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Contrary to popular belief, Lorem Ipsum is not simp. Contrary to popular belief, Lorem Ipsum is not simp 
       </article>   
      </div> 

    </div> 
    <div class="box red"> 
       <div class="social-footer"> 
       <h3 class="connect-us-title">Connect With Us</h3> 
       <div class="social-flex"> 
        <img class="social-icon" src="img/desktop/images/twitter.jpg">     
        <img class="social-icon" src="img/desktop/images/insta.jpg">      
        <img class="social-icon" src="img/desktop/images/fb.jpg"> 

       </div> 
          <p id="footer-copyright-text"> KEEVA INC © 2017 | Designed by Radian3 </p> 

      </div> 
    </div> 
    <div class="box orange"> 
    <div class="location-footer"> 
           <h3 class="contact-us-title"> Our Location</h3> 
       <div class="location-content-wrap"> 
        <div class="location-image-wrap"> 
         <img class="maps-icon" src="img/desktop/images/home_31.jpg"> 
        </div> 
        <div class="address-footer"> 
         <img class="location-icon" src="img/desktop/images/home_35.jpg"> 
         <p> 25/153 Queens St, Avenue, Brisbane, QLD, 4000</p>      
         <p> Email: [email protected]</p>       
        </div>   
       </div>   
      </div> 
    </div> 

     </footer> 


     <!-- JQuery --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <!-- Script --> 
    <script type="text/javascript" src="js/script.js"></script> 
</body> 
</html>

出典

2017-07-22 Shaz

あなたのjavascriptの - ここでは具体的には：

// prevent anchor tags for working (?) 
    e.preventDefault();

は、ページの変更を妨げています。これは、あなたが「1ページ」のウェブサイトを適応させているように見えます。

$(".header-nav a.scrollLink").click(function(e) { 
    // prevent anchor tags for working (?) 
    e.preventDefault(); 
    var sectionID = e.currentTarget.id + "-View"; 
    $("html, body").animate({ 
     scrollTop: $("#" + sectionID).offset().top 
    }, 1000) 
})

...とは、あなたが

出典

2017-07-22 07:29:46 mayersdesign

はい、完璧な作品ページを下にスクロール滑らかにしたいですリンクをcalss scrollLinkを置く：セクションに

変更。しかし、パート2の問題はまだ残っています - blog.htmlをクリックすると、index.html、＃about-View divに移動します。何か案は？ – Shaz

リンクを変更する必要があります：About - これはブラウザにindex.htmlページに行くように指示します。その後、約ID番号 – mayersdesign

にアクセスします。はい、私は@mayersdesignで試しましたが、正しいパスを指していますが、クリックすると移動します。 – Shaz

ナビゲーションアンカータグは機能しませんが、なぜですか？

答えて

関連する問題