【问题标题】：Navigating between <div> elements of same page using AngularJS with Bootstrap使用带有 Bootstrap 的 AngularJS 在同一页面的 <div> 元素之间导航
【发布时间】：2013-12-24 05:58:55
【问题描述】：

我正在使用 bootstrap 和 angular js 开发单页应用程序。

我有这样的页面，

                First | Second

我的代码是这样的，

<div class="container">
<div class="navbar">
              <div class="navbar-inner">               
                  <ul class="nav">
                    <li class="active"><a href="#first">First</a></li>
                    <li><a href="#second">Second</a></li>

                   </ul>

              </div>
            </div>
            <div id="first">this is first page</div>
            <div id="second">this is second page</div>                  
            </div>

但是当我浏览按钮时，两个 HTML 元素都会显示出来

<div id="first">this is first page</div>
                <div id="second">this is second page</div>

如何正确导航。

请指教

【问题讨论】：

是什么让您认为这足以制作单页应用程序？据我所知，除了您可以导航到的一个长滚动页面（当您有足够的内容可以滚动时，您的代码将执行此操作）之外，Bootstrap 不会做任何类型的单页内容。 AngularJS 可能做得更多，但看起来您需要添加更多 Javascript 才能使其工作。
@cincodenada: （关于您的编辑建议） 我不确定这种特殊情况，但如果该关键字已经存在，则通常无需在标题中添加关键字出现在标签中。
@AndriyM Mkay，我会记住这一点。在这种情况下，我认为这个问题与 AngularJS 的关系比与 Bootstrap 的关系更大，因此在标题中使用 Bootstrap 而不是 AngularJS 是没有意义的，因为它是一个单页应用程序。

标签： jquery css angularjs twitter-bootstrap

【解决方案1】：

如果您想隐藏一个 div 并显示另一个，您可以在您的 div 上使用 ng-show 并使用您的按钮来显示或隐藏您的 div。有些人是这样想的：

$scope.showFirst = true;

<div id="first" ng-show="showFirst">this is first page</div>
<div id="second" ng-show="!showFirst">this is second page</div>

并使用您的按钮在showFirst 属性之间切换：

ng-click="showFirst = true" // On your first button
ng-click="showFirst = false" // On your second button

但是如果这些div是不同的页面，就必须使用路由。

【讨论】：

【解决方案2】：

您需要创建类似这样的 CSS：Demo

.pageContainer {
    width:300px;
    height:300px; 
    float:left;
    border:1px solid #ccc;
    position:relative;
    overflow:hidden;
}

.containInner {
    float:left;
    width:900px;
}

.pageContainer .page {
    width:300px;
    height:300px; 
    float:left;
}

#first {
    background:red;
}
#second {
    background:blue;
}

【讨论】：

【解决方案3】：

按照以下方式尝试使用 angularJS 和 jquery。

html

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">               
            <ul class="nav">
                <li class="active"><a id="first" ng-click="navigatePage(this)">First</a></li>
                <li><a id="second" ng-click="navigatePage(this);">Second</a></li>   
            </ul>
        </div>
    </div>
    <div id="first">this is first page</div>
    <div id="second">this is second page</div>                  
</div>

Angularjs

$scope.navigatePage = funntion(obj){
    var targetId = $(obj).attr('id');
    var scroT = $('#'+targetId).offset();
    $('html,body').stop(true,true).animate({scrollTop:scroT.top+'px'});
}

【讨论】：