Linking to a specific HTML tab of another page within the website

Question

In my home page there are 7 links. code of one link is given below.

<a id="mosquito-btn" href="~/general-pest-control.cshtml#nav-mosquito" class="btn btn-p btn-arrow">Read More</a>

On another page I have 7 tabs for each of the 7 links in the home page. when home page links are clicked I want to be redirected to the other page and open the specific tab.

    <nav>
       <div class="nav nav-tabs tabs-pest" id="nav-tab" role="tablist">
       <a name="top"></a>
       <a class="tab-pest active" id="nav-mosquito-tab" data-toggle="tab" href="#nav-mosquito" role="tab" aria-controls="nav-mosquito" aria-selected="true"><img src="~/Images/tab-mosquito.png" /><span>Mosquito</span></a>
       </div>
   </nav>

   <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
      <div class="tab-pane fade show active" id="nav-mosquito" role="tabpanel" aria-labelledby="nav-mosquito-tab">
          <div class="row">
              <p>text></p>
          </div>
       </div>
   </div>

At the moment only the first tab is opened on click of home page link. How do I open tabs ?

Do I need jquery?

I tried with this one. But it didn't work

var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];

if (tabName.length)
    $('#nav-tabContent .tab-pest[href="~/general-pest-control.cshtml' + tabName + '"]').tab('show');

Answer 1

Try with localStorage :

Save id of clicked link in localstorage:

<a id="nav-mosquito-tab">

$("body").on("click","a",function(){
    localStorage.setItem("clickedTab",$(this).attr("id"));
});

Give the same id as before in page that contains tabs. And do click on the tab using .click()

<a class="tab-pest active" id="nav-mosquito-tab" data-toggle="tab" href="#nav-mosquito" role="tab" aria-controls="nav-mosquito" aria-selected="true"><img src="~/Images/tab-mosquito.png" /><span>Mosquito</span></a>

$(document).ready(function(){
    var tab = localStorage.getItem("clickedTab");
    $("#"+tab).click();
});

Answer 2

All you have to do is add an attribute target="_blank" in the anchor tag as shown below:

 <a href = "https://www.google.co.in" target="_blank">I will open this link in new tab</a>

I dont know why it isn't executable here. But here is a JSFiddle link for the same.

Here is a reference link for the same.