Question

我将bootstrap与angularjs一起使用主要是因为我想使用navbar

来使用部分内容

我已经使用了这个模板并添加了angularJS http://ironsummitmedia.github.io/startbootstrap-landing-page/

以下是navbar

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="#about">Inicio</a>
        </li>
        <li>
            <a href="#services">Servicios</a>
        </li>
        <li>
            <a href="#contact">Contactenos</a>
        </li>
    </ul>
</div>

以下是divs，内容为navbar选项

<a  name="services"></a>
<div class="content-section-a">

    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-sm-6">
                <hr class="section-heading-spacer">
                <div class="clearfix"></div>
                <h2 class="section-heading">Death to the Stock Photo:<br>Special Thanks</h2>
                <p class="lead">A special thanks to <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a> for providing the photographs that you see in this template. Visit their website to become a member.</p>
            </div>
            <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                <img class="img-responsive" src="img/ipad.png" alt="">
            </div>
        </div>

    </div>
    <!-- /.container -->

</div>

当我点击Servicios（#services）带我去

http://localhost:8080/index.html#/services

而不是带我去

http://localhost:8080/index.html#services

在＃和服务

之间添加了一个/

我已安装nodejs并运行http-server（npm pakckage）用于测试目的

Answer 1

我找到了解决方案

创建链接时，请使用两个##和target="_self"

<a href="##faq-1" target="_self">Question 1</a>
<a href="##faq-2" target="_self">Question 2</a>
<a href="##faq-3" target="_self">Question 3</a>

并在html元素中使用id属性，如下所示：

<div id="faq-1">Section 1</div>
<div id="faq-2">Section 2 Content></div>
<div id="faq-3">Question 3</div>

无需更改任何路由或其他任何内容

bootstrap navbar #links正被angularjs改变（或不工作）

1 个答案: