How to change a css class of a page element if you come from a specific web or link?

Question

I've implemented a "Tab" functionality inside one of my pages. Following is the code:

$(document).ready(function() {
  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })
})

.tab.current {
  color: red;
}

.tab-content {
  display: none;
}

.tab-content.current {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="tabs">
  <li class="tab current" data-tab="tab-1">Overview</li>
  <li class="tab" data-tab="tab-2">Get started</li>
</ul>

<article id="tab-1" class="tab-content current">TAB 1</article>
<article id="tab-2" class="tab-content">TAB 2</article>

It works perfect, but only in this page. What I want to achieve is to have links from another page (index.html) to this one (features.html) with a specific tab selected.

Is there any simple way to update my function to achieve this behavior?

Here is a codepen link with the code.

i think you can use the tab id as a # in the url and that will mean when you get to that page, the correct tab should load (if you are using [jQuery tabs](https://jqueryui.com/tabs/)). If not then you will need to write your own function to read any # out of the url and select the tab based on it — Pete, Mar 06 '17 at 10:49
You can use `queryParameters` or `cookies` or `localStorage` or `sessionStorage` to pass value from one page to another. Then on second page, read this value and process accordingly — Rajesh, Mar 06 '17 at 10:52
Possible duplicate of [Sharing a variable between multiple html pages](http://stackoverflow.com/questions/16264253/sharing-a-variable-between-multiple-html-pages) — Rajesh, Mar 06 '17 at 10:55
Possible duplicate of [Global Variable usage on page reload](http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload) — JJJ, Mar 06 '17 at 11:04
You can set a cookie or store local data to tell what the last page on your site was... i think rajesh is on the right track with session storage... you wouldnt nees to wirry about coming from off site then — me_, Mar 06 '17 at 11:08

score 0 · Answer 1 · answered Mar 06 '17 at 11:03

Example li Get started is feature.html and list Overview is index.html. What you can do is put the class current on list data-tab and article id tab-2 in feature.html anyways it will remove the class when you click the list overview.

$(document).ready(function() {
  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })
});

.tab.current {
  color: red;
}

.tab-content {
  display: none;
}

.tab-content.current {
  display: block;
}

li {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
  <li class="tab" data-tab="tab-1">Overview</li>
  <li class="tab current" data-tab="tab-2">Get started</li>
</ul>

<article id="tab-1" class="tab-content">TAB 1</article>
<article id="tab-2" class="tab-content current">TAB 2</article>

Thanks Mark, but this does not solve my problem, as I need to be able to link **both tabs** from external pages. I have a link at the main navbar to navigate to feature.html, wich should show the "Overview" tab . Besides, I have another link at the featured section of the homepage, wich navigates to features.html too, but should show the "Get started" tab. — J. Rubio, Mar 06 '17 at 13:27

How to change a css class of a page element if you come from a specific web or link?

1 Answers1