Question

Using jQuery’s UI Tabs. This is my code.

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Find a Category</a></li>
    <li><a href="#tabs-2">Business Name</a></li>
    <li><a href="#tabs-3">All Categories</a></li>
    <li><a href="#tabs-4">Business to Business</a></li>
  </ul>
  <div style="clear:both;"></div>
  <div id="tabs-1"><p>Tab 1</p></div>
    <div id="tabs-2"><p>Tab 2</p></div>
    <div id="tabs-3"><p>Tab 3</p></div>
    <div id="tabs-4"><p>Tab 4</p></div>
    </div>
</div>

Initiating like this…

$(function() {
    $('#tabs').tabs();
});

On some pages of my site it works perfectly. On other pages, the href="#tabs-x" is prepended with the path of the page, e.g. <a href="#tabs-1">Find a Category</a> becomes <a href="/page/path/#tabs-1">Find a Category</a> (in this case the page would be found at /page/path/.) When this happens it thinks it needs to use Ajax and ends up reloading the page into the tab.

The really odd thing is that it doesn’t happen on every page (though it does happen on most of them). For example

http://cbpstage.eblairsolutions.net/online/all-categories/ – works great
http://cbpstage.eblairsolutions.net/online/business-to-business/ – fails.

I have validated the pages (they are not perfect but fail in exactly the same ways). I’ve compared them using IDM’s ultracompare. They are different pages so there are some differences, but nothing material that I can detect that is causing the href to behave differently.

I’ve spent all day on this and only have a balding head to show for it. Would love someone else to look at this.

Answer 1

D Hoerster is on the right track. The path seems to come from the server. Either you track it down, or you could add the following jQuery before your $('#tabs').tabs(... declaration:

$('#tabs a').each(function(){
  $(this).attr('href',"#"+$(this).attr('href').split('#')[1]);
});

Edit: Added "#"+