Question

我试图让我的一个jQuery UI标签链接到外部网址而不是标签内容。我在这里阅读过类似的帖子，比如这个Using jQuery UI Tabs. How would I make one of the tabs link to a URL rather than load a tab panel?有相同的主题，但因为我对如何编写JQuery知之甚少，我不知道如何在我的页面上实现它以使其工作。

我的JQuery代码是这样的：

<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就是这样：

<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>

Answer 1

您可以使用'beforeActivate'事件来处理外部网址。这是一个例子。

$( "#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');
      }
    }
});

Answer 2

最简单的方法是在选项卡中添加ID

HERES A JS FIDDLE DEMONSTRATING IT WORKING

（注意，你的悬停事件应该只是将这些命令包装在一个函数中，就像我正在做的那样。）

（另请注意，我在我的示例中使用了window.open，而你应该使用window.location。我必须这样做因为相同的原始策略，因为jsfiddle使用框架）

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

然后只需添加一个点击处理程序：

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

jQuery UI选项卡，外部有一个选项卡链接

2 个答案: