爲什麼這個下拉菜單填充工作鏈接？

我正在學習引導通過更改示例。我試圖創建的下拉菜單應該有三個鏈接。主標籤應鏈接到someroute，而通過下拉菜單顯示的兩個鏈接應分別讓用戶點擊route3和route4。但是，應該有三個工作鏈接的是死鏈接。 需要對下面的代碼進行哪些具體更改才能使菜單欄中的所有四個鏈接都能正常工作，包括下拉菜單中的三個鏈接？爲什麼這個下拉菜單填充工作鏈接？

這是a plnkr that recreates the problem including the code below。

這裏的index.html，其中包括在下拉菜單中的引導代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
    <link href="style.css" rel="stylesheet"/> 
    <style type="text/css"> 
    [ng\:cloak], [ng-cloak], .ng-cloak { display: none !important; } 
    </style> 
    </head> 
    <body class="ng-cloak" ng-cloak="" ng-app="hello"> 
    <div class="container" ng-controller="navigation"> 
     <ul class="nav nav-pills" role="tablist"> 
      <li ng-class="{active:tab('home')}"><a href="/">Home</a></li> 
      <li class="dropdown"> 
       <a ng-class="{active:tab('someroute')}" class="dropdown-toggle" data-toggle="dropdown" href="/someroute">Some route 
       <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li ng-class="{active:tab('route3')}"><a href="/route3">route three</a></li> 
        <li ng-class="{active:tab('route4')}"><a href="/route4">route four</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    <div class="container" ng-view=""></div> 
    <script type="text/javascript" src="home.js"></script> 
    <script type="text/javascript" src="someroute.js"></script> 
    <script type="text/javascript" src="navigation.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    </body> 
</html>

來源

2016-02-02 CodeMed

你缺少你的榜樣引導的JS文件，也JQuery的，這是由引導需要...嘗試添加以下到您<head>：

<script data-require="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

來源

2016-02-02 01:33:18 jcane86

這個改變除了按照另一個用戶的已刪除答案的建議添加'＃'，解決了這個問題。查看更新後的plnkr：http://plnkr.co/edit/T96QWX1uEccH34l2Ievt?p=preview – CodeMed

您是否願意評論如何讓下拉菜單顯示在鼠標上而不是點擊鼠標？這將節省一個單獨的張貼。謝謝你+1。 – CodeMed

當然，似乎bootstrap默認不支持它，但這裏的第一個答案提供了一個非常簡單的解決方案來自己做：http://stackoverflow.com/questions/16214326/bootstrap-dropdown-with-hover – jcane86

你有幾個問題在這裏：

呦您在plnkr.co上使用html5Mode，根據我的經驗，這不適用於路由，因爲應用預覽是在iframe中提供的
您包含Bootstrap的CSS，但不包括其JavaScript（對於Angular，您希望使用UI Bootstrap ）
當使用UI引導，則需要使用自定義指令uib-dropdown，uib-dropdown-toggle和uib-dropdown-menu而不是那些類，因爲角使用指令來處理DOM元素，而不是類選擇

這裏是一個工作例如：plnkr.co

來源

2016-02-02 01:34:03

爲什麼這個下拉菜單填充工作鏈接？

回答

相關問題