jQuery UI sekmesi - sekmelere ve URL'lere gitmek için el ile seçim

Question

Javascript ve HTML'imi nasıl değiştirebilirim ki ilk sekme normal çalışır ve ikinci sekme penceremi tamamen yeni bir sayfaya yönlendirir?

Bunu buldum: http://snipplr.com/view/9513/, ancak nasıl uygulanacağını anlayamadım.

Benim Senaryo: Ben yukarı ve here çalıştıran bir keman var

<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

<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(); 

}); 

Benim HTML. Tamamen işe yaramıyor ve tahmin ediyorum çünkü bir keman çalmak kemandan çıkmanıza izin vermeyecektir (bu nedenle window.location aslında çalışmıyor), ancak nasıl yapıldığını görebilirsiniz. Bu kodu kendi ortamımda test ettim ve işe yarıyor.

Ayrılmak istediğiniz bağlantıya mutlaka bir sınıf ekleyin (benim durumumda, leave sınıfını ekledim). Ardından, önce Etkinleştir seçeneğinde, yeni sekmenin bağlantısının leave sınıfına sahip olup olmadığını kontrol edin ve eğer varsa, bağlantı konumuna gidin.

Bu iş sizin için uygunsa bana bildirin.

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