XiLab XiLab - 2 months ago 7x
jQuery Question

Jquery .hash doesn't work on bootstrap tabs

I have a page with bootstrap tabs which I'd like to link from external pages. So I can immediately access the content of my interest.

Even though I read many questions in matter I can't really reach the goal. I've written this code which is not working for me:

var hash = document.location.hash;
if (hash) {
$('.nav-tabs a[href='+hash+']').tab('show');
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;

And my HTML is the following

<ul id="profile-tabs" class="nav-tabs">
<li class="active"><a href="<?php echo get_permalink(); ?>#general-informations" data-toggle="tab"><?php _e("General Info",'Mytheme');?></a></li>
<li class=""><a href="<?php echo get_permalink(); ?>#other" data-toggle="tab"><?php _e("Other",'Mytheme');?></a></li>

I'm thinking that maybe I'm using .hash in the wrong way. Can you help me or suggest similar answers? I mean I've read almost all those without success.

Jim Jim

Your CSS selector is incorrect. You are trying to match apples and oranges.

If your first anchor tag's href attribute was set to http://localhost/somehwhere/#general-informations and your URL bar ended with #general-informations then your CSS selector, a[href='+hash+'], would be attempting to do a direct match. Unfortunately the string http://localhost/somehwhere/#general-informations is not equal to the string #general-informations.

What you want is the CSS ends with selector: $=, use this:

$('.nav-tabs a[href$="'+hash+'"]').tab('show');

This will select all anchor tags with an href attribute that ends with the value of the hash variable.