I have an application with 3 tabs displayed near the bottom of the page. These tabs display a number of links to additional resources that the user can access. If the user scrolls to the bottom of the page and opens any of these tabs, the tab works perfectly. That is, a list of resources is displayed to the user and all of the links in the list work in the expected manner.

I also have three links at the top of the page that can be used to jump down to the bottom of the page and open up one of the tabs. Whenever one of these links is used, a strange thing happens to the tabs. The correct tab is opened up and the list of resources inside the tab appears to display correctly. However, when you click any of the links inside the tab, the link does not work as it should. Instead, it just changes to the word 'Loading...' and nothing further happens!

When I move the cursor over any of these links, the expected url of the link is not displayed in the status bar. Rather, it shows the name of the current page followed by "#ui-tabs=" and a number that starts at 134 and gets larger for each link.

One more strange thing: these errors only occur for anonymous users. When the user is logged in, the tabs work just fine!

Here is the javascript code that gets executed whenever one of the links at the top of the page are selected. Basically, I let tabs know which one has been selected and then set the class names of each tab so that the selected tab is highlighted on the page>

$(document).ready(function() {
	$('#guides_link').click(function() { 
		$('#tabs-tabset').tabs().tabs('select', 0);
		$('.guides-and-tutorials').addClass("ui-tabs-selected");
		$('.helpful-websites').removeClass("ui-tabs-selected");
		$('.selected-books').removeClass("ui-tabs-selected");
		$('.guides-and-tutorials').removeClass("active");
		$('.helpful-websites').removeClass("active");
		$('.selected-books').removeClass("active");
	  });
	$('#websites_link').click(function() { 
		$('#tabs-tabset').tabs().tabs('select', 1); 
		$('.guides-and-tutorials').removeClass("ui-tabs-selected");
		$('.helpful-websites').addClass("ui-tabs-selected");
		$('.selected-books').removeClass("ui-tabs-selected");
		$('.guides-and-tutorials').removeClass("active");
		$('.helpful-websites').removeClass("active");
		$('.selected-books').removeClass("active");
	  });
	$('#books_link').click(function() { 
		$('#tabs-tabset').tabs().tabs('select', 2);
		$('.guides-and-tutorials').removeClass("ui-tabs-selected");
		$('.helpful-websites').removeClass("ui-tabs-selected");
		$('.selected-books').addClass("ui-tabs-selected");
		$('.guides-and-tutorials').removeClass("active");
		$('.helpful-websites').removeClass("active");
		$('.selected-books').removeClass("active");
	  });
});

If anyone has any insight into what is going on here, I would greatly appreciate it!