js：divを隠す

Question

私はJavascriptにはかなり新しくなっていますので、私にご負担ください。

$('#bioContent').css('display','none'); 
$('#skillsContent').css('display','none'); 
$('#credsTab').css('background-color','#fff'); 
$('#credsTab a').css('color','#19d700'); 
$('#bioTab').css('background-color','#ccc'); 
$('#bioTab a').css('color','#444'); 
$('#skillsTab').css('background-color','#ccc'); 
$('#skillsTab a').css('color','#444'); 

$('#credsTab').click(function(){ 
    $('#credsContent').css('display','block'); 
    $('#bioContent').css('display','none'); 
    $('#skillsContent').css('display','none'); 
    $('#credsTab').css('background-color','#fff'); 
    $('#credsTab a').css('color','#19d700'); 
    $('#bioTab').css('background-color','#ccc'); 
    $('#bioTab a').css('color','#444'); 
    $('#skillsTab').css('background-color','#ccc'); 
    $('#skillsTab a').css('color','#444'); 
}) 

$('#bioTab').click(function(){ 
    $('#bioContent').css('display','block'); 
    $('#credsContent').css('display','none'); 
    $('#skillsContent').css('display','none'); 
    $('#bioTab').css('background-color','#fff'); 
    $('#bioTab a').css('color','#19d700'); 
    $('#credsTab').css('background-color','#ccc'); 
    $('#credsTab a').css('color','#444'); 
    $('#skillsTab').css('background-color','#ccc'); 
    $('#skillsTab a').css('color','#444'); 
}) 


$('#skillsTab').click(function(){ 
    $('#skillsContent').css('display','block'); 
    $('#bioContent').css('display','none'); 
    $('#credsContent').css('display','none'); 
    $('#skillsTab').css('background-color','#fff'); 
    $('#skillsTab a').css('color','#19d700'); 
    $('#bioTab').css('background-color','#ccc'); 
    $('#bioTab a').css('color','#444'); 
    $('#credsTab').css('background-color','#ccc'); 
    $('#credsTab a').css('color','#444'); 
}) 

これはJavaScriptのタブの実装です。基本的にはクリックすると、divは非表示になり、他は表示されます。

私の問題はskillTabにはスキルメソッドが追加されています。そのスキルメソッドをクリックすると、ページがリフレッシュされ、そのときにcredsTabに戻りますが読み込まれます。

私はそれがリフレッシュするとスキルにとどまるような方法であるかどうか疑問に思っていました。

Answer 1

fragment URLsまたはHTML5 historyで行うことができます。

たとえば、skillsタブを開くと、フラグメントを#skillsに変更します。これはリフレッシュのあいだに残ります。その後

---

function switchToTab(tabName) { 
    // DOM/CSS manipulation etc. here 
} 

var tabs = ['bio', 'skills', 'creds']; 
var initialTab = 'bio'; 
for (var i = 0; i < tabs.length; i++) { 
    (function(tabName) { 
     document.getElementById(tabName + 'Tab').addEventListener('click', function() { 
      switchToTab(tabName); 
      location.hash = '#' + tabName; 
     }, false); 
    })(tabs[i]); 
} 

window.addEventListener('load', function() { 
    if (location.hash[0] == '#') 
     switchToTab(location.hash.substr(1)); 
}, false); 
window.addEventListener('hashchange', function() { 
    if (location.hash[0] == '#') 
     switchToTab(location.hash.substr(1)); 
    else 
     switchToTab(initialTab); 
}, false); 

テストされていない。あなたのページがでどうあるべきか、初期状態を決定するためにあなたのonLoadでwindow.location.hashをチェックして、JSライブラリの多くは、このようアブストラクトはあなたのためにそこに離れます。

Answer 2

初期の提案。すべてのタブに同じクラスを与え、多分class='toggleableTab'あなたはページ・リフレッシュのためとして

$('.togglableTab').live('click',function(){ 
    $('.togglableTab').not(this).hide(); 
    $(this).show(); 

}); 

を使用することができます。 AJAXを使って、ページ全体をリフレッシュせずにページにあなたのスキルを「追加」する方法を見てみましょう。

Answer 3

たとえば、http://jqueryui.com/demos/tabs/のようなタブ付き解決策がいくつか用意されています。 JQuery UIは、この作業の多くをあなたのために行う素晴らしい方法です。

あなた自身でやりたい場合は、クラスを使用するソリューションを提案しますが、他の提案とは少し異なります。代わりに、 "activeTab"と "tabbable"の2つのクラスがあります。あなたのCSSでは、 "activeTab"を表示として、 "tabbable"を隠しとして定義します。各タブにIDと "tabbable"のクラスを与えます。フォームに "activeTabId"と呼ばれる隠しフィールドがあります。ページを読み込むときに、ページを最初に読み込んだときにデフォルトのタブに設定するなど、これがサーバー側から戻されるようにしてください。次に、ページロード時に次のコードを実行して、すべてがうまくいっているようにすることができます：

$(".tabbable").click(new function(){ 
    $(".tabbable").removeClass("activeTab"); 
    $(this).addClass("activeTab"); 
    $("#activeTabId").val($(this).attr("id")); 
}); 

$("#" + $("#activeTabId").val()).addClass("activeTab");