Article suggestions
  1. Home
  2. Section: Developer Hub
  3. Link Directly to Specific Tabs on Member Profile Pages Using the Tab's #ID in the URL

Link Directly to Specific Tabs on Member Profile Pages Using the Tab's #ID in the URL

Link Directly to Specific Tabs on Member Profile Pages Using the Tab's #ID in the URL
  • avatar
Written by Chan Nier
Updated on February 19, 2025

 Link: https://support.brilliantdirectories.com/support/solutions/articles/12000095795

This article provides a JavaScript snippet that allows you to activate specific tabs on a webpage when the page loads, based on the hash in the URL.

The script checks if there's a hash in the URL, and if there is, it activates the corresponding tab and tab pane, while deactivating all others.

One key feature of this script is that it prevents the page from automatically scrolling down to the activated tab, keeping the viewport at the top of the page. This can be particularly useful for pages with long content, where you want to highlight a specific section without disrupting the user's navigation.

Place this code in the footer of the SEO Template or Custom Footer Code in Design Settings.

<script>
$(document).ready(function() {
var url = document.location.toString();
if (url.match('#')) {
var hash = url.split('#')[1];
$('.nav-tabs a[href="#' + hash + '"]').on('click', function(e) {
e.preventDefault();
}).tab('show');
$('.tab-pane').removeClass('active');
$('#' + hash).addClass('active');
}
});
</script>

Once the JavaScript snippet mentioned above is added to the footer, go to the member profile and open Inspect Mode.

How to use Inspect Element

Locate the <a> element for the tab. It will have a href value like #div4

Now the tab's ID can be appended to the profile URL like below:

https://example.com/united-states/beverly-hills/sample-category/john-smith#div16

When this URL is used, the script will automatically open the tab without scrolling, showing only that specific tab’s content.


Thank you for leaving a rating!
Did you find this article helpful?
0 out of 0 people found this article helpful so far
Can't find what you're looking for? Get in touch
How can we help?
Send your question below and we'll get back to you as soon as possible.
Cancel
translation missing: en.kb.default.contact_form_error
×
Thanks for your message!
Thanks for your message!
×