代码之家  ›  专栏  ›  技术社区  ›  Mauricio Gracia Gutierrez

angularjs正在更改引导导航栏#链接(或不工作)

  •  0
  • Mauricio Gracia Gutierrez  · 技术社区  · 10 年前

    我正在使用 bootstrap 具有 angularjs 主要是因为我想使用 navbar

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

    这是 导航条

     <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 内容 导航条 选项

    <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

    在#和服务之间添加了a/

    我有 nodejs 已安装并正在运行 http-server (npm包装)用于测试

    1 回复  |  直到 10 年前
        1
  •  0
  •   Mauricio Gracia Gutierrez    10 年前

    我找到了解决方案

    创建链接时使用两个 ## 以及 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>
    

    并使用 id 属性,如下所示:

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

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