jQueryタブスクリプトのリンクIDから要素を削除する

Question

リンクで定義されたPHPファイルからコンテンツを取得し、div要素に解析するjQueryタブスクリプトがあります。各リンクのIDは正しいファイルからコンテンツを取得するために使用されますが、リンクIDにtype_が必要なため、適切な場所からコンテンツを取得しません。この問題を解決するにはどうすればよいですか？

これは私の現在のjQueryのコードです：

function load(url){ 
    $.ajax({ 
     url:url, 
     success:function(message){ 
      $("#content").html(message); 
     } 
    }); 
} 

$(document).ready(function(){ 
    $("[id^=type_]").click(function(){ 
     type=$(this).attr("id"); 
     url=""+type+".php"; 
     $("[id^=type_]").removeClass("selected"); 
     $("#"+type).addClass("selected"); 
     load(url); 
     return false; 
    }); 
    $("#type_search").click(); 
}); 

これは私のHTMLコードです：

<ul> 
<li><a id="type_tab1" href="javascript:void(null);">Tab1</a></li> 
<li><a id="type_tab2" href="javascript:void(null);">Tab2</a></li> 
<li><a id="type_tab3" href="javascript:void(null);">Tab3</a></li> 
</ul> 

Answer 1

あなたの説明から、私はなど、tab2.php、あなたはコンテンツがtab1.phpに位置されることを意味すると仮定し、問題はあなたのtype_というIDの接頭辞です。

オプション＃1 - あなたのコードのようなほとんどの

私はあなたがIDでtype_を必要としないと思います。ありますクリーナーとより多くの意味

を作る - あなたは

<li><a id="tab1" class="tab" href="javascript:void(null);">Tab1</a></li> 

のようなあなたのアンカーのそれぞれにclass='tab'と同じことを達成し、その後

$('.tab').click(function() { 
    var tabId = $(this).attr("id"); 
    var url=""+tabId+".php"; 
    $('.tab').removeClass("selected"); 
    $('#' + tabId).addClass("selected"); 
    load(url); 
    return false; 
} 

オプション＃2を行うことができますように思えますあなたのコンテンツのURLでID属性をオーバーロードする理由はありません。試してみてください：

<li><a id="tab1" class="tab" href="/path/to/content/tab1.php">Tab1</a></li> 

通常、これはコンテンツにあなたを取るだろうが、あなたは、デフォルトの動作を防ぐことができます。

$('.tab').click(function(event) { 

    // Prevent actually going to the content 
    event.preventDefault(); 

    // Adjust tabs 
    var $currentTab = $(this);   
    $('.tab').removeClass("selected"); 
    $currentTab.addClass("selected"); 

    // Load content from the href attribute of the tab   
    load($currentTab.attr("href")); 

    return false; 
} 

オプション＃3 - これは、すでにjQueryの拡張

です

JQuery UIタブの使用を検討しましたか？ http://jqueryui.com/demos/tabs/私はデモサイトが時には奇妙なものであることが判明しましたが、JQuery UIは非常に一般的で、安定しており、柔軟性があります。 AJAX経由でコンテンツを読み込むオプションがあります。