tab Giao diện người dùng jQuery - kết hợp các tab và chọn để truy cập URL

Question

Làm cách nào để sửa đổi javascript và HTML để tab đầu tiên hoạt động như bình thường và tab thứ hai hướng cửa sổ của tôi đến một trang hoàn toàn mới?

Tôi đã tìm thấy điều này: http://snipplr.com/view/9513/, nhưng không thể tìm ra cách triển khai.

My Script:

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

<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

Tôi đã có một fiddle và chạy here. Nó không hoàn toàn làm việc và tôi đoán đó là bởi vì chạy một fiddle sẽ không cho phép bạn rời khỏi fiddle (do đó window.location không thực sự làm việc), nhưng bạn có thể xem nó được thực hiện như thế nào. Tôi đã thử nghiệm mã này trong môi trường của riêng tôi và nó hoạt động.

Bạn về cơ bản thêm một lớp vào liên kết mà bạn muốn để lại (trong trường hợp của tôi, tôi đã thêm lớp leave). Sau đó, trên beforeActivate, bạn kiểm tra xem liên kết của tab mới có lớp leave và nếu có, hãy đến vị trí liên kết của nó.

Hãy cho tôi biết nếu điều này phù hợp với bạn.

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