使用Angular2和Bootstrap實現側欄導航的問題

Question

我正在開發一個利用引導程序的側邊欄導航的Web應用程序。我的URL看起來像：

www.my.url.com/projectName/myPage.html 

的HTML是：

<div class="col-sm-3 col-md-2 sidebar __web-inspector-hide-shortcut__" style="overflow: auto;font-family:verdana;font-size: 16px;font-weight: 200;background-color: #002663;top: 0px;width: 18%;height: 700px;color: #002663;"> 
     <ul class="nav nav-sidebar"> 
     <li class="active"><a href="#generalInfo">General<span class="sr-only">(current)</span></a></li> 
     <li class="dropdown"> 
       <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Specific<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Config</a></li> 
       <li><a href="#">Authentication</a></li> 
       <li><a href="#">ETC...</a></li> 
       <li role="separator" class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
     <li class="dropdown"> 
       <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Environments<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#env1">Env 1</a></li> 
       <li><a href="#env2">Env 2</a></li> 
       <li><a href="#env3">Env 3</a></li> 
       <li role="separator" class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
     </ul> 
     <ul class="nav nav-sidebar"> 
     <li><a href="">Nav item</a></li> 
     <li><a href="">Nav item again</a></li> 
     <li><a href="">One more nav</a></li> 
     <li><a href="">Another nav item</a></li> 
     <li><a href="">More navigation</a></li> 
     </ul> 

    </div> 

<div class="container" style="width:80%;float:left"> 


     <div class="tab-content" style="padding: 22px 0px 29px 88px;"> 

     <div class="tab-pane fade in active" id="generalInfo"></div> 


     <div class="tab-pane" id="env1"></div> 


     <!-- ETC... --> 
    </div> 
</div> 

的HTML的實際實現並不重要，只是爲了證明我在用類和結構的內容。當我在內容上的一個選項，點擊，而不是裝載有一個有效的HREF，它加載爲：

www.my.url.com/projectName/#env1 

當我想它只是顯示隱藏的div類。此代碼與標籤一起工作，但是當我嘗試將其修改爲側欄時，它停止工作。我很確定它與tab-content和tab-pane類有關，但我找不到任何有關如何更改邊欄導航的示例。任何見解都會有幫助。

Answer 1

自己找到答案...要阻止導航欄鏈接到其他頁面，只需將您的<a>錨點分配爲data-toggle="tab"。