UI jQueryのタブ -

Question

私のコード今のところ同じページにタブ内のタブに複数のリンクを作成します：タブ1であなたはをクリックしたときには、コードから見ることができるように

$(function(){ 
     $("#tabs").tabs().find(".ui-tabs-nav").sortable({ axis: "x" });       
     $(document).ready(function() { 
      var $tabs = $("#tabs").tabs(); 
      $('#tabs-1 a').click(function(){ 
       $tabs.tabs('select', 4); }); 

}); 
<div id="tabs"> 
     <ul> 
      <li><a href="#tabs-1">Home</a></li> 
      <li><a href="#tabs-2">Alarms</a></li> 
      <li><a href="#tabs-3">Access Control</a></li> 
      <li><a href="#tabs-4">Services</a></li> 
      <li><a href="#tabs-5">Contact Us</a></li> 
     </ul> 
     <div id="tabs-1"> 
      <p><span class="bodytext">Check our services</span></p> //want to link to tab 4(services) 
      <p><span class="bodytext"> 
      <a href="#tabs-5">Contact us</a>for free 24hours a day...</span></p> 

は、「お問い合わせ」のテキストタブ5. へのリンクは私は何をしたい一般的には4 は私が知っていると思う他のタブ

をリンクタブをwithing 10以上のリンクを作成するには、タブに「当社のサービスを確認してください」からのリンクを作成することですあり私は$tabs.tabs('select', 4);を$tabs.tabs('select', id);に変更しなければならないが、私は自分のリンクを作成したいときにhtmlで "id"を呼び出す方法を知らない。 提案がありますか？

Answer 1

これは、リンク自体にhrefを使用して、おそらくそれがイントラタブリンクであることを示すクラスを使用して、タブを作成してイベントを作成してハンドラを設定する。

$('#tabs').tabs({ 
    create: function(event,ui) { 
     $('a.intra-tab',ui.panel).unbind('click').click(function() { 
      var id = Number($(this).attr('href').replace(/#tabs-/,'')) - 1; 
      $('#tabs').tabs('select',id); 
      return false; 
     }); 
    } 
}); 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Home</a></li> 
     <li><a href="#tabs-2">Alarms</a></li> 
     <li><a href="#tabs-3">Access Control</a></li> 
     <li><a href="#tabs-4">Services</a></li> 
     <li><a href="#tabs-5">Contact Us</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p><span class="bodytext"><a href="#tabs-4" class="intra-tab">Check our services</a></span></p> 
    </div> 
    ... 

また、ライブハンドラを使用して行うこともできます。

$('#tabs').tabs(); 
$('a.intra-tab').live('click', function() { 
    var id = Number($(this).attr('href').replace(/#tabs-/,'')) - 1; 
    $('#tabs').tabs('select',id); 
    return false;  
});