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

我这里有一个小提琴正在运行。它并不完全起作用，我猜这是因为运行小提琴不会让你离开小提琴（因此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>