0

我试图让我的 jQuery UI 选项卡之一链接到外部 url 而不是选项卡内容。我在这里读过类似的帖子，比如Using jQuery UI Tabs。我如何将其中一个选项卡链接到 URL 而不是加载选项卡面板？具有相同的主题，但因为我对如何编写 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>
4

2 回答 2

3

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

$( "#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');
      }
    }
});
于 2014-01-27T08:21:05.467 回答
0

最简单的方法是在标签中添加一个 id

这里有一个 JS 小提琴演示它的工作原理

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

（另请注意，我在示例中使用的是 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
});
于 2013-08-08T19:15:10.487 回答