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

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?


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

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">
    <base href="" />
    <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">
      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 {
        top: 93px;
        padding-bottom: 30px;

      .hcontent {
        font-size: 25px;

      #navigation a{
        color: #fff;
        font-size: 19px;

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

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

      ul li { display: table-cell; }

        min-width: 65%;
        overflow-y: hidden;
        overflow-x: hidden;
        display: none;

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

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

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

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

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

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

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

  <script src=""></script>      
    $("#navigation a").on("click", function(e){
      var currTab = $(this).data("tab");
      localStorage.setItem("currentTab", currTab);

    var lastSelectedTab = localStorage.getItem("currentTab");
    if (!lastSelectedTab) {
      lastSelectedTab = "#home";

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

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

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