Javascript 如何使导航选项卡保持不变_Javascript_Jquery_Html_Css_Angularjs

Javascript 如何使导航选项卡保持不变

javascript jquery html css angularjs

Javascript 如何使导航选项卡保持不变,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,当我单击侧边栏上的按钮时，如果当前选项卡是第二个选项卡，则导航选项卡将显示第一个选项卡，因为第二个选项卡失去焦点。单击侧边栏上的按钮时，如何保持第二个选项卡处于显示状态代码在JSFIDLE中 AngularJs脚本在我的本地服务器上工作。有人能告诉我如何在JSFIDLE中工作吗这里是HTML代码 <html> <head lang="en"> <meta charset="UTF-8"> <title>Nav</titl

当我单击侧边栏上的按钮时，如果当前选项卡是第二个选项卡，则导航选项卡将显示第一个选项卡，因为第二个选项卡失去焦点。单击侧边栏上的按钮时，如何保持第二个选项卡处于显示状态

代码在JSFIDLE中

AngularJs脚本在我的本地服务器上工作。有人能告诉我如何在JSFIDLE中工作吗

这里是HTML代码

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Nav</title>
    <link href="nav.css" rel="stylesheet"/>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<!--            -->
<body ng-app="App" >
  <nav>
    <ul> <span>My App</span>
        <li class="sub">
            <a href="#">Version</a>
            <ul>
                <li class="sub">
                    <a href="#">V2</a>
                    <ul ng-controller="V2Ctrl">
                        <li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</li>
                    </ul>
                </li>
                <li class="sub">
                    <a href="#">V3</a>
                    <ul ng-controller="V3Ctrl">
                        <li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
  </nav>
      <aside class="side" align="left">
         <table onclick="reply_click(event)" ng-app="App" ng-controller="TableCtrl" >
               <tr ng-repeat = "table in tables">
                 <td><button id = "{{table}}" width = "70">{{table}}</button></td>
               </tr>
         </table>
      </aside>
  <article class="tabs">


      <section id="erd">
        <h2><a href="#erd">ERD</a></h2>
        <p>This content appears on tab ERD.</p>
      </section>

      <section id="col">
        <h2><a href="#col">Columns</a></h2>
        <p>This content appears on tab Columns.</p>
      </section>

      <section id="home">
        <h2><a href="#home">Home</a></h2>
        <p>This content appears on tab Home. lfkdgl;k  lkfd;lkg ';lkfg ;lkg 'df;lk ;lk ';lk ';fdlkg ';fdlkg';dflk;ldfkg';lkdlfkdfkglkdf lkjhlsdjhfljdfhlkjdh jh jhkjdhfkjsdhf skjdhf lk h dsfjlkjsdlkfj;dslkfj  dskfj;kj sdfkj fkdj;lfkjsd;lkfj   sdkfj ;slkj sdfj;lskjf   skdj flksjdf ; sdfkj ;sdlkfj dskfj sdkjfhueuu suehu heu he u heu heh ueh ufhu fhe uueh ush uhsudh ue huhuhufheuheu u heiu h euh eh ue </p>
      </section>

  </article>


  <footer align="bottom">
    <span>"Copyright&copy; 2016 </span></span>
  </footer>

  <script>
    var app = angular.module('App', []);
    app.controller('TableCtrl', function($scope) {
        $scope.tables = ['category','supplier','customer','dept','empl','orders'];
    });
    app.controller('V2Ctrl', function($scope) {
        $scope.V2s = ['2.10','2.11','2.12','2.13','2.14','2.15','2.16','2.17','2.18','2.19','2.20','2.21','2.22','2.23','2.24','2.25','2.26','2.27','2.28'];
    });  
    app.controller('V3Ctrl', function($scope) {
        $scope.V3s = ['  ','   SP1','   SP2','   SP3','   SP4','   SP5','   SP6','   SP7','   SP8','   SP9','   SP10'];
    });  
  </script>

</body>
</html>

更新jsfiddle

既然没有人回答你的问题，我会像以前一样回答这个问题

问题是你没有关闭你的


下面是产生错误的代码：
<li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</a></li>
<li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</a></li>



在JSFIDLE的左侧，您可以添加外部资源。通过这种方式，你可以添加js文件或jquery。我试图添加带有http引用的url，然后它要求使用https，所以我点击了“取消”。不知何故添加了angular-min.js。然后我点击更新，然后运行。还是不行。进一步的想法？感谢我添加的url。我从html标记中删除js代码，并将其放入javascript窗口。仍然不起作用。链接现在是。现在它起作用了。在你发布的小提琴中没有外部资源。在“所有内容”的左侧找到外部资源，并查看它现在已添加。
<li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</a></li>
<li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</a></li>