How to keep navigation tab remain unchanged


Tags: javascript,jquery,html,css,angularjs

Problem :

When I click a button on the sidebar, and if the current tab is the second tab the navigation tab is going to display the first tab as the second tab lost the focus. How can I keep the second tab in display while clicking a button on the sidebar?

the code is in jsfiddle

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

The AngularJs scripts works at my local. Can anyone also tell me how to make it work in jsfiddle?

HTML Code here

<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 code here.

#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;
}

the update jsfiddle.

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



Solution :

Since nobody answered you're question I will answer this question like I did the previous ones.

The problem was that you weren't closing you <a> tags with </a>. So the html added extra <a> tags with made the left bar also use a href which is used for your tabs. This way it overrided the open tab.

See the new JSfiddle: https://jsfiddle.net/98okrj0f/19/

Here's the code that was making the error's:

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

    CSS Howto..

    HTML/CSS: How do I make right floats go to the top instead of floating at the position where they were when they were inline?

    section to be trigger of show/hide content by click html/css only

    How to reference CSS children [duplicate]

    css margin-left propery - how to specify for various browsers [closed]

    How to stop css image slideshow at last image?

    How to align both vertically and horizontally in CSS?

    How to debug CSS bundled by Webpack?

    How to keep the footer docked at the bottom of the page considering following structure? [duplicate]

    CSS - how to apply styles to first elements in a static generated list

    how can a media query detect a full-hd smartphone?

    How to show sorting order if column width is smaller than caption in free jqgrid

    How to use the CSS :not selector for classes further up the DOM tree

    How to get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    How to add a color overlay to a background image?

    How to make a grid layout with unknown number of columns and each column has equal size? [closed]

    ASP.NET: How to set the css class of a Control during DataBind?

    How to get css width of class?

    How does wikimedia code there input onfocus

    How to make Text inside Div Unselectable/uncopyable? [closed]

    How to add multiple css rules at once through Dev-Tools or Firebug

    How to convert columns to rows using CSS

    Error: Dynamically fetching css from CDN with fallback to local copy, How to resolve?

    CSS: can't understand how to work with the z-index

    how to restrict the children element inside the parent element in css?

    how to position two divs next to each other, one of them is centered in the container of both divs

    How do I add a logo into the nav bar in CSS?

    Leaflet for R: How to change default CSS cluster classes

    How to center a div in html & css, always keep the aspect ratio, and fill max screen width/height?

    How to make `margin: top;` based on browser height?

    How do I remove the side padding in the following case?