Activate jQuery script through URL for tabbed navigation menu

Question

I have a vertical tabbed navigation menu on one of my webpages. It uses a jQuery script to change the CSS style to display or hide different content wrapped in DIVs on that page based on what the user clicks. When the page loads it displays the first DIV. My client wishes to be able to select the other hidden content and have it displayed through a direct URL. E.g: URL to page that loads the third tabbed link instead of the first and having to manually select it.

<div class="naccs">
  <div class="gc gc--1-of-3">
    <div class="menu">
      <div id="biofeedback"><span>Biofeedback</span></div>
      <div id="hrv"><span>Heart rate variability</span></div>
      <div id="neurofeedback"><span>Neurofeedback</span></div>
      <div id="muscle-rehabilitation"><span>Muscle rehabilitation</span></div>
      <div id="peak-performance"><span>Peak performance</span></div>
      <div id="continence-training"><span>Continence training</span></div>
      <div id="research"><span>Research</span></div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
      <script>
        var cooki = Cookies.get('Tab');
        // var cooki=getCookie("Tab");
        console.log(cooki);
        //alert(cooki);
        
        $(document).ready(function() {
          cooki;
          var id = '#' + cooki;
          //alert(id);
          if (id == "#biofeedback") {
            $('html, body').animate({
              scrollTop: $("div").offset().top
            }, 10);
            
            $(id).addClass('active');
            $('.nacc li.active').removeClass('active');
            $(".naccs ul").find("li:eq(" + 0 + ")").addClass("active");
          } 
          else if (id == "#hrv") {
            $('html, body').animate({
              scrollTop: $("div").offset().top
            }, 10);
            
            $(id).addClass('active');
            $('.nacc li.active').removeClass('active');
            $(".naccs ul").find("li:eq(" + 1 + ")").addClass("active");
          } 
          else if (id == "#neurofeedback") {
            $('html, body').animate({
              scrollTop: $("div").offset().top
            }, 10);
            
            $(id).addClass('active');
            $('.nacc li.active').removeClass('active');
            $(".naccs ul").find("li:eq(" + 2 + ")").addClass("active");
          } 
          else if (id == "#muscle-rehabilitation") {
            //alert('success');
            $(id).addClass('active');
            $('.nacc li.active').removeClass('active');
            $(".naccs ul").find("li:eq(" + 3 + ")").addClass("active");
          } 
          else if (id == "#peak-performance") {
            $('html, body').animate({
              scrollTop: $("div").offset().top
            }, 10);
            
            $(id).addClass('active');
            $('.nacc li.active').removeClass('active');
            $(".naccs ul").find("li:eq(" + 4 + ")").addClass("active");
          } 
          else if (id == "#continence-training") {
            $('html, body').animate({
              scrollTop: $("div").offset().top
            }, 10);
            
            $(id).addClass('active');
            $('.nacc li.active').removeClass('active');
            $(".naccs ul").find("li:eq(" + 5 + ")").addClass("active");
          } 
          else if (id == "#research") {
            $('html, body').animate({
              scrollTop: $("div").offset().top
            }, 10);
            
            //alert('success')
            $(id).addClass('active');
            $('.nacc li.active').removeClass('active');
            $(".naccs ul").find("li:eq(" + 6 + ")").addClass("active");
          }
        });
      </script>
    </div>
  </div>

THE CONTENT DIV

  <div class="gc gc--2-of-3">
    <ul id="repo" class="nacc">
      <li class="active">
        <h4>Biofeedback</h4>
        <p> CONTENT </p>
        ...
</div>

biberman · Answer 1 · 2022-11-07T10:55:41.037

If the id is used like www.dymmyurl.com#thisistheid, you could split the url in two parts with '#' as separator and use the second part:

var id = window.location.href.split('#')[1]

Example:

Doesn't work in the stack snippet, but worked in a local test file (i omitted the cookie part because it isn't necessary for the question)...

$(document).ready(function() {
  var id = '#' + window.location.href.split('#')[1];

  if (id == "#biofeedback") {
    $('html, body').animate({
      scrollTop: $("div").offset().top
    }, 10);

    $(id).addClass('active');
    $('.nacc li.active').removeClass('active');
    $(".naccs ul").find("li:eq(" + 0 + ")").addClass("active");
  } 
  else if (id == "#hrv") {
    $('html, body').animate({
      scrollTop: $("div").offset().top
    }, 10);

    $(id).addClass('active');
    $('.nacc li.active').removeClass('active');
    $(".naccs ul").find("li:eq(" + 1 + ")").addClass("active");
  } 
  else if (id == "#neurofeedback") {
    $('html, body').animate({
      scrollTop: $("div").offset().top
    }, 10);

    $(id).addClass('active');
    $('.nacc li.active').removeClass('active');
    $(".naccs ul").find("li:eq(" + 2 + ")").addClass("active");
  } 
  else if (id == "#muscle-rehabilitation") {
    $(id).addClass('active');
    $('.nacc li.active').removeClass('active');
    $(".naccs ul").find("li:eq(" + 3 + ")").addClass("active");
  } 
  else if (id == "#peak-performance") {
    $('html, body').animate({
      scrollTop: $("div").offset().top
    }, 10);

    $(id).addClass('active');
    $('.nacc li.active').removeClass('active');
    $(".naccs ul").find("li:eq(" + 4 + ")").addClass("active");
  } 
  else if (id == "#continence-training") {
    $('html, body').animate({
      scrollTop: $("div").offset().top
    }, 10);

    $(id).addClass('active');
    $('.nacc li.active').removeClass('active');
    $(".naccs ul").find("li:eq(" + 5 + ")").addClass("active");
  } 
  else if (id == "#research") {
    $('html, body').animate({
      scrollTop: $("div").offset().top
    }, 10);

    $(id).addClass('active');
    $('.nacc li.active').removeClass('active');
    $(".naccs ul").find("li:eq(" + 6 + ")").addClass("active");
  }
});

#repo li {
  display: none;
}

#repo li.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="naccs">
  <div class="gc gc--1-of-3">
    <div class="menu">
      <div id="biofeedback"><span>Biofeedback</span></div>
      <div id="hrv"><span>Heart rate variability</span></div>
      <div id="neurofeedback"><span>Neurofeedback</span></div>
      <div id="muscle-rehabilitation"><span>Muscle rehabilitation</span></div>
      <div id="peak-performance"><span>Peak performance</span></div>
      <div id="continence-training"><span>Continence training</span></div>
      <div id="research"><span>Research</span></div>
    </div>
  </div>

  <div class="gc gc--2-of-3">
    <ul id="repo" class="nacc">
      <li class="active">
        <h4>Biofeedback</h4>
        <p> CONTENT 0</p>
      </li>

      <li class="active">
        <h4>Heart rate variability</h4>
        <p> CONTENT 1</p>
      </li>

      <li class="active">
        <h4>Neurofeedback</h4>
        <p> CONTENT 2</p>
      </li>

      <li class="active">
        <h4>Muscle rehabilitation</h4>
        <p> CONTENT 3</p>
      </li>

      <li class="active">
        <h4>Peak performance</h4>
        <p> CONTENT 4</p>
      </li>

      <li class="active">
        <h4>Continence training</h4>
        <p> CONTENT 5</p>
      </li>

      <li class="active">
        <h4>Research</h4>
        <p> CONTENT 6</p>
      </li>
    </ul>
  </div>
</div>

By the way your code repeats 7 times. Therefor you could use the id as a class in the content lis to prevent the usage of the "li:eq(" + <counter> + ")" part:

HTML:

<li class="biofeedback active">
  <h4>Biofeedback</h4>
  <p> CONTENT 0</p>
</li>

JS:

var id = window.location.href.split('#')[1];
...
$('#' + id).addClass('active');
$('.nacc li.active').removeClass('active');
$(".naccs ul").find("li." + id).addClass("active");

$(document).ready(function() {
  var id = window.location.href.split('#')[1];
  
  if (id) {
    $('html, body').animate({
      scrollTop: $("div").offset().top
    }, 10);

    $('#' + id).addClass('active');
    $('.nacc li.active').removeClass('active');
    $(".naccs ul").find("li." + id).addClass("active");
  }
});

#repo li {
  display: none;
}

#repo li.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="naccs">
  <div class="gc gc--1-of-3">
    <div class="menu">
      <div id="biofeedback"><span>Biofeedback</span></div>
      <div id="hrv"><span>Heart rate variability</span></div>
      <div id="neurofeedback"><span>Neurofeedback</span></div>
      <div id="muscle-rehabilitation"><span>Muscle rehabilitation</span></div>
      <div id="peak-performance"><span>Peak performance</span></div>
      <div id="continence-training"><span>Continence training</span></div>
      <div id="research"><span>Research</span></div>
    </div>
  </div>

  <div class="gc gc--2-of-3">
    <ul id="repo" class="nacc">
      <li class="biofeedback active">
        <h4>Biofeedback</h4>
        <p> CONTENT 0</p>
      </li>

      <li class="hrv active">
        <h4>Heart rate variability</h4>
        <p> CONTENT 1</p>
      </li>

      <li class="neurofeedback active">
        <h4>Neurofeedback</h4>
        <p> CONTENT 2</p>
      </li>

      <li class="muscle-rehabilitation active">
        <h4>Muscle rehabilitation</h4>
        <p> CONTENT 3</p>
      </li>

      <li class="peak-performance active">
        <h4>Peak performance</h4>
        <p> CONTENT 4</p>
      </li>

      <li class="continence-training active">
        <h4>Continence training</h4>
        <p> CONTENT 5</p>
      </li>

      <li class="research active">
        <h4>Research</h4>
        <p> CONTENT 6</p>
      </li>
    </ul>
  </div>
</div>

Activate jQuery script through URL for tabbed navigation menu

1 Answers1