Is this possible using jQuery/javascript?

In another page, I have a <nav> that are just tabs and shows only a specific content when you click a tab-link.

page1.html:

<nav class="subPageNav">
   <a href="#" id="A" class="tab-link">A</a>
   <a href="#" id="B" class="tab-link">B</a>
   <a href="#" id="C" class="tab-link">C</a>
   <a href="#" id="D" class="tab-link">D</a>
</nav>

<section id="A">
<!-- content -->
</section>

<section id="B">
<!-- content -->
</section>

and so on..

In a separate page, I have an <a> where I should be sent to the specific tab from another page.

page2.html

<a href="next.html#A">A</a>

The code I had isn't working as I wanted. How can I pull off this?

Is this possible using jQuery/javascript?

In another page, I have a <nav> that are just tabs and shows only a specific content when you click a tab-link.

page1.html:

<nav class="subPageNav">
   <a href="#" id="A" class="tab-link">A</a>
   <a href="#" id="B" class="tab-link">B</a>
   <a href="#" id="C" class="tab-link">C</a>
   <a href="#" id="D" class="tab-link">D</a>
</nav>

<section id="A">
<!-- content -->
</section>

<section id="B">
<!-- content -->
</section>

and so on..

In a separate page, I have an <a> where I should be sent to the specific tab from another page.

page2.html

<a href="next.html#A">A</a>

The code I had isn't working as I wanted. How can I pull off this?

• javascript
• jquery

• 1 anchors # can be anchored in the same page, but not linked between separate documents – parallaxis Commented Sep 26, 2018 at 2:24
• @parallaxis It seems it can - it works for me on my site – Jack Bashford Commented Sep 26, 2018 at 2:24
• How can I perform this if it's on seperate pages? – user3744076 Commented Sep 26, 2018 at 2:25
• @JBDouble05 with a full url to the seperate document it can work from page1 href="/page2#anchor" to open in a new tab add <a href="next.html#A" target="_blank">A</a> – parallaxis Commented Sep 26, 2018 at 2:26
• Yes, that's what I was getting at @parallaxis. – Jack Bashford Commented Sep 26, 2018 at 2:26

4 Answers 4

You need to get the hash in the URL, find the corresponding element and then trigger a click:

$(function() {
  var activeTab = document.querySelector(location.hash);
  if (activeTab) {
    activeTab.click();
  }
});

Try this:

$(document).ready( function() {
   var activeTab = window.location.hash;
   if (activeTab) {
      $( activeTab )[0].click();
   }
});

This one worked out for me. I added id to the <a> buttons.

page1.html

<a id="nav-a" href="page2.html">A</a>
<a id="nav-b" href="page2.html">B</a>
<a id="nav-c" href="page2.html">C</a>
<a id="nav-d" href="page2.html">D</a>

then create a javascript file with this

$(function() {

    $('a#nav-a').click(function(event) {
    localStorage.setItem("text", "nav-a");
    });

    $('a#nav-b').click(function(event) {
    localStorage.setItem("text", "nav-b");
    });

    /*and so on...*/

    var path = window.location.pathname;
    var pathSub = path.substring(path.lastIndexOf("/") + 1, path.length)

    if(pathSub == "page2.html"){
        document.getElementById(localStorage.getItem('text')).click();
    }
}) 

and for the page2.html, I include the id the same as the id of the <a> elements.

<nav class="subPageNav">
   <a href="#" id="nav-a" class="tab-link">A</a>
   <a href="#" id="nav-b" class="tab-link">B</a>
   <a href="#" id="nav-c" class="tab-link">C</a>
   <a href="#" id="nav-d" class="tab-link">D</a>
</nav>

What you need to do is use a partially full URL:

<a href="/next.html#A">A</a>

Try using this - all that changed is the / at the start.