ウェブページでタブを作成するには？

ウェブページ上でタブをクリックすると、タブ上でクリックが実行されたときにタブがCSSに変更されますが、クリックページ上でもリロードされ、CSSが元に戻ります。ウェブページでタブを作成するには？

2011-02-06 eomeroff

最初の部分の比較的簡単ですが、私はあなたが、「クリック・ページにもリロードされ、CSSが元になっていることにより、何を意味するか分かりません「。これを明確にすることはできますか？ –

クリックするとタブが表示されますいくつかのCSSクラスが追加され、他のタブとは異なりますが、そのタブもリンクであり、クリックするとページが再読み込みされ、追加したクラスはなくなり、それ以外のものはありません。 – eomeroff

はjqueryのを使用してはいけません。タブで変更プロセスがトリガーされます。

静的なコンテンツがある場合は、これを文字列に書き込んで、このファイルから読み込むことができます。 dinamically生成されたコンテンツがある場合は、新鮮なコンテンツを取得するためにajaxリクエストを作成し、読み込みを待っている同じ文字列に格納する必要があります。

タブを使用すると、コンテンツの読み込みに一般的な機能を使用できます。静的コンテンツを持つ

function load(data) { 
    document.getElementById("victim").innerHTML = data; 
} 

function changeCss(element) { 
//redoing all changes 
document.getElementById("tab1").style.background="#fff"; 
document.getElementById("tab2").style.background="#fff"; 

element.style.background = "#f0f"; 
}

トリガ：

document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))}; 
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};

あなたは、CSSを変更する場合、変更を行う別の関数が必要です。

私はあなたが何をしているのか分からないので、jqueryを使用しないように指示します。

が、全体のコードは、このようなjqueryのに置き換えることができthiss：あなたはjavascriptのはそこjqueryのと間違って注意して、しかし、私はちょうど欲しいより多くの人々がそこにある参照されるしくみを知っていれば

$("tab1").click(function(e) { 
    $("#tab1 | #tab2").each(function() { 
    $(this).css("background","#fff"); }); 
    $(this).css("background","#00f"); 
    $("#victim").append("static content 1"); 
}); 


$("tab12click(function(e) { 
    $("#tab1 | #tab2").each(function() { 
    $(this).css("background","#fff"); }); 
    $(this).css("background","#00f"); 
    $("#victim").append("static content 2"); 
});

彼らのウェブサイトを非常に速くてシンプルにすることができますが、何が何度も何度も何度も同じ問題を抱えています。

出典

2011-02-06 11:25:45

感謝の男私は私のコンピュータに来るとすぐにこれを試してみます。 – eomeroff