html - 为什么我的 html/css 导航栏不跳转到给定的类？

Question

所以我创建了一个简单的单页个人网站，其中包含几个元素； “主页”、“关于我”、“简历”和“联系方式”。我已经在我的导航栏类中实现了这一切。但是，当我使用导航栏时，它不会跳转到我选择的类!谁能解决这个问题？

我使用的代码示例(有些是荷兰语):

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
             aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About Me</a></li>
                <li><a href="#portfolio">CV</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<header id="home" class="home">
    <div class="overlay sections">
        <div class="container">

            <div class="row">
                <div class="wrapper">
                    <div class="col-md-6 col-md-offset-3">

                        <div class="home-details text-center">

                            <div class="logo">
                                <img src="assets/img/Logo.png" alt="Logo" />
                            </div>

                            <div class="home-title">
                                <h1><span>TIM</span>DIJKSTRA</h1>
                            </div>

                            <div class="scroll-down">
                                <h5>Scroll naar beneden voor meer!</h5>
                                <a href="#about"><i class="fa fa-angle-double-down"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<section id="about" name="about" class="about sections">
    <div class="container">

        <div class="row">
            <div class="wrapper">

                <div class="col-md-6">
                    <div class="about-photo">
                        <img src="assets/img/Tim.png" alt="Tim Dijkstra" />
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="heading about-content">
                        <h3>About Me</h3>
                        <p>Hoi, ik ben Tim!</p>
                        <p>Een gedreven student met een passie voor alles wat software is. Sinds mijn jeugdjaren ben ik al
                            geïnteresseerd in het ontwikkelen van applicaties. Het was dan ook een logische stap om deze hobby door te
                            zetten tot mijn huidige studie, Software Ontwikkeling op de Avans University of Applied Sciences in
                            's-Hertogenbosch. Sindsdien heb ik gewerkt met verschillende programmeertalen en frameworks, zoals Java, SQL,
                            C#, HTML/CSS, PHP, Python en meer.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="scroll-down">
            <h6>Blijf scrollen, er is nog meer te zien!</h6>
            <a href="#portfolio"><i class="fa fa-angle-double-down"></i></a>
        </div>
    </div>
</section>

<section id="portfolio" class="portfolio">
    <div class="overlay sections">
        <div class="container">

            <div class="heading text-center">
                <div class="title">

                    <h3>CV</h3>

                    <div class="portfolio-item">
                        <div class="portfolio-details">

                            <a href="assets/doc/CV.pdf" target="_blank">
                                <img src="assets/img/CV.png" />
                            </a>

                        </div>
                    </div>

                    <div class="scroll-down">
                        <h5>Blijf scrollen, er is nog meer te zien!</h5>
                        <a href="#contact"><i class="fa fa-angle-double-down"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="contact sections">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="contact-details text-center">

                    <div class="contact-category">
                        <div class="mail">
                            <h5>Mail :</h5>
                            <h2><a href="mailto:contact@timdijkstra.info">contact@timdijkstra.info</a></h2>
                        </div>
                    </div>

                    <div class="contact-category">
                        <div class="linkedin">
                            <h5>LinkedIn :</h5>
                            <h2><a href="https://www.linkedin.com/in/timdijkstra/" target="_blank">www.linkedin.com/in/timdijkstra</a></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<footer id="footer" class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="copyright text-center">
                    <p>Website made by Tim Dijkstra. All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
</footer>

Answer 1

欢迎使用 Stackoverflow!

您想单击一个 a 标签，然后当前 View 应该移动到具有 href 中指定的 id 的标签，对吗？

对我来说，它实际上确实适用于您的代码。

看看这个:https://codepen.io/anon/pen/vPjbaQ

因为链接 anchor 和 ids 是一个 html specification这就是您需要的一切:

<a href="myCustomAnchor">Click me to move to 'myCustomAnchor'</a>

<section id="myCustomAnchor">Some Content .... </div>