Follow the tab links on the jquery ui tab

Question

I have jquery tabs like

<ul id="tabsList"> <li><a href="#tab-1">Name 1</a></li> <li><a href="#tab-2">Name 2</a></li> <li><a href="http://www.google.com/">Name 3</a></li> </ul> <div id="tab-1">content 1</div> <div id="tab-2">content 2</div> 

the first two tabs load the corresponding div. But the third should go to google.com, instead it does nothing. It simply adds http://example.com/index.html # ui-tabs- [object Object] to the URL.

I am developing a wordpress plugin, and for the admin page I need a tab interface. I tested this on a local server and did not work

update:

I do not want to load google.com inside the page. It should open the web page in a new tab / window, as normal links do.

Answer 1

When I saw the generated source code,

 <li><a href="http://www.google.com/">Name 3</a></li> 

has been changed to

 <li><a href="#ui-tabs-[object Object]">Name 3</a></li> 

But the other lists were the same. I still don't know if this is due to a testing problem on the local server.

So, I tried this option. I removed the "href" attribute and added a class named "theLink", for example

 <li><a class="theLink" target="_blank">Name 3</a></li> 

and then I added the following jquery

 $('.theLink).attr('href', 'http://www.google.com'); 

after that he worked, as I was expelled. The third tab when clicked is uploaded by google.com to a new tab

Answer 2

I'm not sure what you want, but if it should open the link as a new page / replacement for the current page, the documentation explains:

[How ...] ... follow the tab url instead of loading its contents via ajax

Note that opening a tab in a new window is unexpected, for example. inconsistent behavior, usablity problem ( http://www.useit.com/alertbox/tabs.html ).

 $('#example').tabs({ select: function(event, ui) { var url = $.data(ui.tab, 'load.tabs'); if( url ) { location.href = url; return false; } return true; } }); 

See http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

Note. . In jQuery> 1.9.0 use activate , not select

Answer 3

I had the same problem. I solved this by providing a tab binding that should be loaded externally by a class called "followtablink". Then I changed my tabs () call:

 $('.tabs').tabs({ select: function(event, ui) { var url = $.data(ui.tab, 'load.tabs'); var className = ui.tab.className; if( className == "followtablink" ) { location.href = url; return false; } return true; }}); 

Each time a tab is selected, it follows the link when it encounters this class.

Note. . In jQuery> 1.9.0 use activate , not select

Answer 4

You cannot, as the request for content from google.com will be a cross call and the xhr call will fail.

Why not place an iframe inside the third div content with an src attribute pointing to google?

Demo here

 <ul id="tabsList"> <li><a href="#tab-1">Name 1</a></li> <li><a href="#tab-2">Name 2</a></li> <li><a href="#tab-3">Google Tab</a></li> </ul> <div id="tab-1">content 1</div> <div id="tab-2">content 2</div> <div id="tab-3"> <iframe src="http://www.google.com"></iframe> </div>