jQuery UI tabs, have a tab link externally

Question

I am trying to get one of my jQuery UI tabs to link to an external url and not the tab contents. I have read similar posts on here, like this Using jQuery UI Tabs. How would I make one of the tabs link to a URL rather than load a tab panel? with the same topic but becuase I know so little about how to code JQuery, I do not know how to implement it on my page to make it work.

My JQuery code is this:

<script type="text/javascript">
  $(function(){
    $('#tabs').tabs();

    $('#dialog_link, ul#icons li').hover(
      function() { $(this).addClass('ui-state-hover'); },
      function() { $(this).removeClass('ui-state-hover'); }
    );

  });
</script>

HTML is this:

<ul>
  <li><a href="#tabs-1">Downloads</a></li>
  <li><a href="http://www.youtube.com"><img src="../../pics/youtube_logo.png" width="49" height="20"  alt=""/></a></li>
</ul>

score 3 · Answer 1 · answered Jan 27 '14 at 08:21

3

You can use 'beforeActivate' event to handle the external URLs. here is an example.

$( "#tab" ).tabs({
  collapsible: true,
  active : false,
  beforeActivate: function (event, ui) {
      if( $(ui.newTab).find('a').attr('href').indexOf('#') != 0 ){ //check if it is hash link
        window.open($(ui.newTab).find('a').attr('href'), '_self');
      }
    }
});

answered Jan 27 '14 at 08:21

Amit Verma

31
2

If you want to open the link in a new browser tab, make the target '_blank' instead of '_self', and add the line: return false; after the window.open – cmgharris Mar 26 '19 at 16:37

Rooster · Answer 2 · 2013-08-08T19:46:17.813

0

easiest way is to add an id to the tab

HERES A JS FIDDLE DEMONSTRATING IT WORKING

(Note, your hover event should just wrap those commands in one function like I'm doing.)

(Also note, I'm using window.open in my example whereas you should use window.location. I had to do this because of same origin policy because jsfiddle uses frames)

<li><a id="fancy_tab"><img src="../../pics/youtube_logo.png" width="49" height="20"  alt=""/></a></li>

and then just add a click handler:

$('#fancy_tab').click(function(){
    window.location = "youtube.com";//hardcoded link but you could pull this from the tab
});

edited Aug 08 '13 at 19:46

answered Aug 08 '13 at 19:15

Rooster

9,954
8
44
71

I'm not sure what I'm doing wrong but I can't get it to work. html now looks like this" `

Kim

Aug 08 '13 at 19:30

@Kim I'm not sure if you posted the full code, but there are unclosed brackets in what you just posted. If thats just a segment, could you post a fiddle? Its possible theres a stopPropagation somewhere – Rooster Aug 08 '13 at 19:36

@Kim see my edited answer and working jsfiddle. I made sure to include jquery library and jquery ui library in mine as you did not. – Rooster Aug 08 '13 at 19:46

jQuery UI tabs, have a tab link externally

2 Answers2