jQueryタブスクリプトの選択されたタブ

Question

リンクで定義されたPHPファイルからコンテンツを取得し、div要素に解析するjQueryタブスクリプトがあります。ページが読み込まれると、既にタブが選択されており、ユーザーは別のタブを選択できます。ただし、タブ以外の場所をクリックすると、選択したタブは削除されます。なぜこれができますか？

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

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

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

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

<ul> 
<li><a id="tab1" href="javascript:void(null);">Tab1</a></li> 
<li><a id="tab2" href="javascript:void(null);">Tab2</a></li> 
<li><a id="tab3" href="javascript:void(null);">Tab3</a></li> 
</ul> 

Answer 1

jqueryのセレクタは、IDタグを持つすべての要素をターゲットに述べています。 idタグを持つページの要素には、クリックハンドラが割り当てられます。どちらか、またはjavascriptでは、すべての要素にid属性があるということです。通常、null /空に設定されます。セレクタは基本的にすべてのタグを対象としています。結局、それはおおよそ同じことです。あなたが既に持っているようなコンベンションをお勧めし、tab_のような単語で各タブを開始してから、jqueryセレクタで[id^="tab_"]のようなものを使用してください。セレクタは、tab_で始まるすべての要素を取得します。

Answer 2

たより良いと

http://creativealive.com/easy-to-use-jquery-tabs-css-jquery/