πŸŽ‰ New: Top 75 PHP Interview Questions for 2026 β€” Free for all learners

Visual Composer (WPBakery) tabs issue when linking directly to an inner tab (like #phponline) using a URL anchor

P
php Guru
Β· Β· 2 min read Β·

πŸ“Œ Key Takeaways

  • Visual Composer (WPBakery) tabs issue when linking directly to an inner tab (like #phponline) using a URL anchor

this is a common Visual Composer (WPBakery) tabs issue when linking directly to an inner tab (like #phponline) using a URL anchor.

Let’s break it down and fix it step-by-step πŸ‘‡


Why it happens

Visual Composer (VC) tabs rely on JavaScript initialization that runs after page load, and it only activates the first tab by default (the one with vc_active).

When you open a link like:

https://phponline.in/keys/#phponline

The page loads fine, but VC’s JS doesn’t β€œlisten” to the hash (#phponline) β€” so it keeps showing the first tab instead of activating the one in the URL.


Fix Options

Option 1: Add small JavaScript to auto-switch tab from URL hash

Add this custom JS snippet in your site footer (or β€œCustom JS” area if your theme/VC has one):

jQuery(document).ready(function($) {
var hash = window.location.hash;
if (hash) {
var $tabLink = $('a[href="' + hash + '"]');
if ($tabLink.length) {
// Remove active classes from all tabs and content
$('.vc_tta-tab, .vc_tta-panel').removeClass('vc_active'); // Activate the clicked tab
$tabLink.parent('.vc_tta-tab').addClass('vc_active');
$(hash).addClass('vc_active'); // Scroll to the tab if needed
$('html, body').animate({ scrollTop: $(hash).offset().top - 100 }, 500);
}
}
});

πŸ”Ή Where to place it:

  • Inside Appearance β†’ Customize β†’ Additional CSS/JS β†’ Custom JS
  • OR inside your theme’s footer before </body>
  • OR use a plugin like Simple Custom CSS and JS or Code Snippets.

Option 2: Use vc_tta-tabs built-in JS trigger

If the above doesn’t fully work, you can call VC’s native API after the tab init:

jQuery(window).on('load', function() {
var hash = window.location.hash;
if (hash && jQuery('a[href="' + hash + '"]').length) {
jQuery('a[href="' + hash + '"]').trigger('click');
}
});

This forces VC’s own event system to β€œclick” the correct tab after the page fully loads.


Option 3: Fix links manually (if you can edit them)

Instead of #phponline, use the VC format:

https://phponline.in/keys/#vc_tta-tab-<ID>

…but this is usually less reliable because IDs can change when you edit the page.


Extra Tip

If you use caching or minification (like WP Rocket or Autoptimize), ensure the script isn’t deferred β€” otherwise, it might run before VC tabs finish initializing.

P
php Guru
PHP Developer & Technical Writer β€” phponline.in A seasoned PHP developer with 8+ years of experience in Laravel, MySQL, and REST APIs. Writes practical tutorials and career guides to help developers grow their skills and income. All salary data is researched from real job postings and developer surveys.
← Previous Post
[your-email] ! Unsafe email config is used without sufficient protection.
Next Post β†’
how to fix "You have some jquery.js library include that comes after the Slider Revolution files js inclusion."