How to link directly to content in a specific tab within a webpage

Question

I'm a technical writer using MadCap Flare to author an online output. Naturally, I'm pretty clueless when it comes to coding, but I have a beginner-level of knowledge of CSS and HTML5, with even slightly less knowledge of javascript.

Using online resources and articles, I managed to implement a mostly functional version of tabs within a webpage, but I'm struggling with figuring out how to link to a specific place within the tabs. Currently, the webpage will load the first tab by default, but I need to be able to link to a specific heading in the second or third tab.

Here's my current javascript (only used to switch between tabs):

$(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');
    })
})

I'm not sure how relevant, but here's the script that I have in my MasterPage.

<script src="../Scripts/new_tabs.js" type="application/javascript">
    </script>

Here's my current html code:

    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1"><a name="Tab1">Tab 1 Label</a></li>
        <li class="tab-link" data-tab="tab-2"><a name="Tab2">Tab 2 Label</a></li>
        <li class="tab-link" data-tab="tab-3"><a name="Tab3">Tab 3 Label</a></li>
    </ul>
    <div class="tab-content current" id="tab-1">
        <p>Tab 1 content goes here</p>
    </div>
    <div class="tab-content" id="tab-2">
        <p>Tab 2 content goes here</p>
    </div>
    <div class="tab-content" id="tab-3">
        <p>Tab 3 content goes here</p>
    </div>

At the very least, I need the ability to link to a specific tab from other pages in the site, but ideally I'd be able to link to specific content within tabs, such as a Head1 or a p tag.

Can anyone assist a struggling non-coder?

Answer 1

From what I understand, you are using JS to manage which tab and which contents are current. Since you are not putting each content on its own page and are making a single-page site, there is only one way I can think that this would work.

You can use search parameters to send specific data back and forth between your other pages. For example:

http://yourwebsite.com/?key=value

Using this, you can send key/value pairs of data to other pages. Your <a> tag will look something like this on your other pages:

<a href="http://yourwebsite.com/?tab=2">Link to Tab 2</a>

You can get the data on your main page by doing something like:

$(document).ready(function(){
  let params = new URLSearchParams(location.search);
  let currentTab = params.get('tab') || 1;
  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('current');
  $('li[data-tab=tab-' + currentTab + ']').addClass('current');
  $("#tab-"+currentTab).addClass('current');

  $('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');
      
  });
});

Let's go over the added code. First, we have:

let params = new URLSearchParams(location.search);

This is pretty straightforward. location.search will return our search parameters as a string. In our case, it could be "?tab=2". Then we use the new URLSearchParams() web API to turn the string we got from location.search into an object so we can access/modify its data easier. The resulting object is assigned to the variable params.

Then we have:

let currentTab = params.get('tab') || 1;

This will assign currentTab with the value of the search parameter "tab" or the number 1 in case params.get('tab') is not defined (the number 1 is the default tab you want the users to see if there is no search parameter provided, i.e. they went to your page without clicking on the links on your other pages).

Lastly, we have:

$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$('li[data-tab=tab-' + currentTab + ']').addClass('current');
$("#tab-"+currentTab).addClass('current');

This removes all current classes from all the list elements and tab-content divs. It will then find the tab and the tab-content div based on our currentTab value we got earlier.

This way, if your users goes to:

http://yourwebsite.com/?tab=2

then the 2nd tab and its associated div should be given the current class.

I hope this helps.

~A