Как сохранить вкладку навигации остаются неизменными

Когда я нажимаю кнопку на боковой панели, и если текущая вкладка является второй вкладкой, вкладка навигации будет отображать первую вкладку, так как вторая вкладка потеряла фокус. Как я могу сохранить вторую вкладку на дисплее, нажав кнопку на боковой панели?Как сохранить вкладку навигации остаются неизменными

код в jsfiddle

https://jsfiddle.net/98okrj0f/9/

В AngularJs сценарии работает на моем местном. Может ли кто-нибудь сказать мне, как заставить его работать в jsfiddle?

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>

кода CSS здесь.

#logo{ 
    position: absolute; 
    right:10px; 
    bottom: 10px; 
} 
body{ 
    margin: 0; 
    padding: 0; 
    font-size: 12px; 
    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif; 
} 
nav { 
    background-color: #333; 
    border: 1px solid #333; 
    color: #fff; 
    display: block; 
    margin: 0; 
    padding: 0; 
    z-index: 9999; 
} 
nav ul{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    z-index: 9999; 
    text-align: center; 
} 
na ul span { 
    width: 300px 
    margin-top: 250%;; 
} 
nav ul li { 
    margin: 0; 
    display: inline-block; 
    list-style-type: none; 
    transition: all 0.2s; 
} 

nav > ul > li > a { 
    color: #aaa; 
    display: block; 
    line-height: 1em; 
    /*padding: 0.5em 2em;*/ 
    padding: 0.2em 3em; 
    text-decoration: none; 

} 

nav li > ul{ 
    display : none; 
    margin-top:1px; 
    background-color: #bbb; 

} 

nav li > ul li{ 
    display: block; 
} 

nav li > ul li a { 
    color: #111; 
    display: block; 
    line-height: 1em; 
    padding: 0.2em 2em; 
    text-decoration: none; 
} 

nav li:hover { 
    background-color: #666; 
} 
nav li:hover > ul{ 
    position:absolute; 
    display : block; 
} 
nav li > ul > li ul { 
    display: none; 
    background-color: #888; 
} 
nav li > ul > li:hover > ul { 
    position:absolute; 
    display : block; 
    margin-left:100%; 
    margin-top:-3em; 
} 

nav ul > li.sub{ 
    background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat; 
    z-index: 5; 
    overflow: visible; 
} 

nav ul > li.sub li.sub{ 
    background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat; 
    z-index: 5; 
    overflow: visible; 
} 

/*****************************************************************************/ 
aside { 
    display: block; 
    position: absolute; 
    width: 80px; 
    height: 550px; 
    padding-right: 0; 
    margin: 0; 
    overflow: auto; 
    background-color: lightblue 
} 

article { 
/* position: relative; */ 
} 

article.tabs 
{ 
    position: relative; 
    display: block; 
    width: 1100px; 
    height: 500px; 
    margin: 2em; 
    margin-left:80px; 
    background-color: green; 

} 
article.tabs section 
{ 
    position: absolute; 
    display: block; 
    left: 0; 
    width: 1100px; 
    height: 500px; 
    padding: 10px 20px; 
    background-color: #ddd; 
    border-radius: 5px; 
    box-shadow: 0 3px 3px rgba(0,0,0,0.1); 
    z-index: 0; 
} 
article.tabs section:first-child 
{ 
    z-index: 1; 
} 
article.tabs section h2 
{ 
    position: absolute; 
    font-size: 1em; 
    font-weight: normal; 
    width: 120px; 
    height: 1.5em; 
    top: -1.5em; 
    left: 10px; 
    padding: 0; 
    margin: 0; 
    color: #999; 
    background-color: #ddd; 
    border-radius: 5px 5px 0 0; 
} 
article.tabs section:nth-child(2) h2 
{ 
    left: 132px; 
} 
/* 
article.tabs section:nth-child(3) h2 
{ 
    left: 254px; 
}*/ 

article.tabs section h2 a 
{ 
    display: block; 
    width: 100%; 
    line-height: 1.5em; 
    text-align: center; 
    text-decoration: none; 
    color: inherit; 
    outline: 0 none; 
} 
article.tabs section:target, 
article.tabs section:target h2 
{ 
    color: #333; 
    background-color: #fff; 
    z-index: 2; 
} 
article.tabs section, 
article.tabs section h2 
{ 
    -webkit-transition: all 500ms ease; 
    -moz-transition: all 500ms ease; 
    -ms-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    transition: all 500ms ease; 
} 
footer 
{ 
    color: #999; 
    text-align:center 
    background-color: #333; 
    width: 100%; 
    bottom: 0; 
    position: fixed; 
}

обновление jsfiddle.

https://jsfiddle.net/98okrj0f/13/

источник

2016-03-14 Shawn

На левой стороне JSFiddle вы можете добавить внешние ресурсы. Таким образом вы можете добавить js-файлы или jquery. – user3398922

Я попытался добавить URL-адрес с помощью http-ссылки, после чего попросил https, поэтому я нажал кнопку cancel. Как-то было добавлено угловое-min.js. затем я ударил обновление, а затем запустил. он все равно не сработает. дальнейшая идея? – Shawn

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js – user3398922

Поскольку никто не ответил Ты вопрос, я отвечу на этот вопрос, как я сделал предыдущие.

Проблема была в том, что вы не закрывали вас <a> теги с </a>. Таким образом, html добавил дополнительные <a> теги, сделанные на левой панели, также используйте href, который используется для ваших вкладок. Таким образом, он перекрыл открытую вкладку.

Смотрите новый JSfiddle: https://jsfiddle.net/98okrj0f/19/

Вот код, который делает ошибки-х:

<li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</a></li> 
<li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</a></li>

источник

2016-03-14 20:31:08 user3398922

Yap, проверено. Вы да мужчина :) Спасибо большое. – Shawn

Как сохранить вкладку навигации остаются неизменными

ответ

Смежные вопросы