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

    How to make Online iPhone “Card Game” with HTML5 [closed]

    How to add Navigation dropdown menu?

    Trade off for CSS sprites: how many images to combine into one

    How to force a browser to show the latest changes to a CSS file?

    How to change this table layout to a css layout?

    How to make a scrolling row of Divs using CSS & Javascript?

    How to print the CSS stylesheet for PPI::HTML highlight? [closed]

    How to apply this sidebar to all pages using CSS?

    How to get a JavaFX XYchart to work with user defined CSS?

    How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?

    How to reference / link to a Css-File styling elements in a webview for Android

    How to keep the navbar fixed to top in big screens only using jquery

    How to make specific checkbox items bold (not all) via CSS?

    How does Mozilla create this animated effect?

    jQuery-Based Dropdown Shows Gap Outside of Firefox

    How do I minify CSS and Javascript? [duplicate]

    how to div.width css property using js or jquery?

    How to create rounded corners on DIV's with CSS and ASP.NET MVC 3

    CSS: On hover show and hide different div's at the same time? [duplicate]

    how to remove the css overflow:hidden of jquery dialog

    How to add focus on label css style

    How to select non-header cells with css

    How do I stop a CSS layout from distorting when zooming in/out?

    Need the background to change when the mouse goes over the selected tab. How?

    JQM, CSS: How to change disabled fields css?

    How to customized select element through css?

    How to make text disappear when HTML5 Video has finished loading?

    how to change an existing website to bootstrap [closed]

    Working with a css3 key frame slide effect but cant figure out how to configure correctly.. Fiddle included

    How to make a picture hover over others without moving the other pictures?