文章/答案/技术大牛

发布

社区首页 >问答首页 >导航锚标签不起作用，但为什么呢？

问导航锚标签不起作用，但为什么呢？
EN

Stack Overflow用户

提问于 2017-07-22 07:26:42

回答 1查看 1.7K关注 0票数 0

所以我有一个两页的网站。主页只有一个页面的导航，即当单击“约”时，它会向下滚动到“关于”div。

第1部分-关于index.html

然而，当单击“blog”导航项时，应该转到blog.html。在.header-nav中，我有以下<li><a href="blog.html">Blog</a></li>，但无法工作。在浏览器中，它显示链接指向了blog.html，但是没有。

第2部分-关于Blog.html

blog.html，我已经让从index.html复制了代码--但是当我单击' about‘it时，应该转到主页并向下滚动到约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: support@keeva.com</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>

javascript

html

css

navigation

onepage-scroll

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-22 07:29:46

您的javascript -特别是在这里：

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

正在阻止页面更改。这看起来像你正在调整一个“一个页面”的网站。

将该节改为：

$(".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)
})

...and将calss scrollLink放在您希望向下滚动的链接上。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45251913

复制

相似问题

问导航锚标签不起作用，但为什么呢？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航锚标签不起作用，但为什么呢？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航锚标签不起作用，但为什么呢？
EN