How to add class in the active link to highlight the data-tab?

JavaScript
1

Continuing the discussion from Div class is active after page refresh:

Pullo, Thanks for introducing to local storage which I have never used. Now I loved this local storage but now I only have a problem in highlighting the link. How can I addClass active to the link when currTab is active and removeClass active when inactive using this same solution. Thanks
Can anybody help?

2

Hi,

That thread dates back to 2014 and I’m afraid I don’t have a clue what it was about any more.

Could you therefore please summarize your problem and post a minimal code example which people can run, so as to understand the issue you are facing.

1 Like
3

I was asking about this demo. How can I add class to active link to highlight the menu tab in this same solution?Thanks

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="http://skusobnastranka1.php5.sk/" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>Hide / show content with JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      html, body { height:1100px; }
      body { width: 100%; }
      .main {
        height: 1000px;
        width: 900px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
        border-top-left-radius: 42px;
        border-top-right-radius: 42px;
        -moz-box-shadow: 15px 15px 15px #CCC;
        -webkit-box-shadow: 7px 7px 7px #CCC;
        box-shadow: 20px 20px 20px #000;
        background-color: #DFDEDE;
      }

      .menu {
        height: 60px;
        width: 900px;
        margin-top: 63px;
        margin-right: auto;
        margin-left: auto;
        background-image: url(menu8.jpg);
      }

      .content {
        left:0px;
        top: 93px;
        position:relative;
        padding-bottom: 30px;
      }

      .hcontent {
        margin-top:230px;
        font-size: 25px;
        color:black;  
      }

      #navigation a{
        color: #fff;
        padding-right:25px;
        font-size: 19px;
        position:relative;
        top:15px;
        left:180px;     
      }

      #navigation a:hover { color: #000; }

      ul {
        width: 500px;
        display: table;
        table-layout: fixed;
      }

      ul li { display: table-cell; }

      .panel{
        min-width: 65%;
        overflow-y: hidden;
        overflow-x: hidden;
        display: none;
      }
    </style>
  </head>
  <body>  

  <div class="main">
    <div class="content">
      <div class="menu">      
        <ul id="navigation">
          <li><a data-tab="#home" href="#">Home</a></li>
          <li><a data-tab="#link1" href="#">link1</a></li>
          <li><a data-tab="#link2" href="#">link2</a></li>
          <li><a data-tab="#link3" href="#">link3</a></li>
          <li><a data-tab="#link4" href="#">link4</a></li>
          <li><a data-tab="#link5" href="#">link5</a></li>
        </ul>
      </div>
    </div>

    <div id="home" class="panel">
      <div class="hcontent">
        Homepage content 
      </div>
    </div>

    <div id="link1" class="panel">
      <div class="hcontent">
        Link 1 Content
      </div>
    </div>

    <div id="link2" class="panel">
      <div class="hcontent">
        Link 2 Content
      </div>
    </div>

    <div id="link3" class="panel">
      <div class="hcontent">
        Link 3 Content
      </div>
    </div>

    <div id="link4" class="panel">
      <div class="hcontent">
        Link 4 Content
      </div>
    </div>

    <div id="link5" class="panel">
      <div class="hcontent">
        Link 1 Content
      </div>
    </div>
  </div>   

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>      
  <script>
    $("#navigation a").on("click", function(e){
      e.preventDefault();
      var currTab = $(this).data("tab");
      localStorage.setItem("currentTab", currTab);
      $(".panel").hide();
      $(currTab).fadeIn();
    });

    var lastSelectedTab = localStorage.getItem("currentTab");
    if (!lastSelectedTab) {
      lastSelectedTab = "#home";
    }
    $(lastSelectedTab).fadeIn();
  </script>       
  </body>
</html>
4

The normal solution is to remove “active” from all tabs, then add “active” to only the current tab.

5

Thanks for your reply. I was doing the same way but was not getting the result because of css overriding. Now its working fine after removing one css property in my file.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.