jQuery UI選項卡 - 選項卡組合並選擇轉到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

我有一個小提琴和運行here。它並不完全奏效，我猜這是因爲演奏小提琴不會讓你離開小提琴（因此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>