javascript - jQuery UI 选项卡 - 选项卡和 onselect 的组合以转到 URL

Question

如何修改我的 javascript 和 HTML，以便第一个选项卡正常工作，第二个选项卡将我的窗口定向到一个全新的页面？

我找到了这个:http://snipplr.com/view/9513/ , 但无法弄清楚如何实现它。

我的脚本:

<script type="text/javascript">
$(document).ready(function(){

$('#tabs').tabs();      

    if($("#tabs") && document.location.hash){
        $.scrollTo("#tabs");
    }
    $("#tabs ul").localScroll({ 
        target:"#tabs",
        duration:0,
            hash:true
    });

    $('#tabs-min').tabs();

}); 

我的 HTML

<div id="tabs"><ul>
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="URL HERE" class="leave">Tab 2</a></li></ul>

  <div id="tab1">tab1 content</div>
</div>

Answer 1

我已经启动并运行了一个 fiddle here .它并不完全有效，我猜这是因为运行 fiddle 不会让你离开 fiddle (因此 window.location 实际上不起作用)，但你可以看到它是如何完成的。我已经在自己的环境中测试了这段代码，它确实有效。

您实际上是在要离开的链接中添加一个类(在我的例子中，我添加了类 leave)。然后，在 beforeActivate 上，您检查新选项卡的链接是否有 leave 类，如果有，则转到它的链接位置。

让我知道这是否适合您。

<script>
$(function() {
    $( "#tabs" ).tabs({

            beforeActivate: function(event, ui) {

                if (ui.newTab.find("a").hasClass("leave")) {

                     alert("leaving...");
                     window.location = ui.newTab.find("a").attr("href");
                     return false;
                }            
        }
    });
});
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="http://www.google.com" class="leave">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        ...
    </div>
    <div id="tabs-2">
        ...
    </div>
    <div id="tabs-3">
       ....
    </div>
</div>