2

私はついにここで私の質問に役立ついくつかのコードをまとめました。ただし、特定のハッシュを持つページが更新されたときと、タブをクリックして同じページにアクセスしたときのために、別々の関数を作成している限り、かなり長い間表示されます。

$(document).ready(function () {
    $(function () {
        var loc = window.location.href; // For when Hazel is refreshed
        if (/Hazel/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("r p c").addClass("h");
            $("#tab2").removeClass("tail");
            $("#tab3, #tab4").addClass("tail");
        }
    });
    $(function () {
        var loc = window.location.href; // For when Red is refreshed
        if (/Red/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h p c").addClass("r");
            $("#tab3, #tab2").removeClass("tail");
            $("#tab4").addClass("tail");
        }
    });
    $(function () {
        var loc = window.location.href; // For when Pink is refreshed
        if (/Pink/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h r c").addClass("p");
            $("#tab3, #tab4").removeClass("tail");
            $("#tab2").addClass("tail");
        }
    });
});
$(function () {
    var loc = window.location.href; // For when Cyan is refreshed
    if (/Cyan/.test(loc)) {
        $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p").addClass("c");
        $("#tab4").removeClass("tail");
        $("#tab3, #tab2").addClass("tail");
    }
});
$("#tab1").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Hazel tab is clicked
        if (/Hazel/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("r p c").addClass("h");
            $("#tab2").removeClass("tail");
            $("#tab3, #tab4").addClass("tail");
        }
    });
});
$("#tab2").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Red tab is clicked
        if (/Red/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h p c").addClass("r");
            $("#tab3, #tab2").removeClass("tail");
            $("#tab4").addClass("tail");
        }
    });
});
$("#tab3").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Pink tab is clicked
        if (/Pink/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h r c").addClass("p");
            $("#tab3, #tab4").removeClass("tail");
            $("#tab2").addClass("tail");
        }
    });
});
$("#tab4").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Cyan tab is clicked
        if (/Cyan/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p").addClass("c");
            $("#tab4").removeClass("tail");
            $("#tab3, #tab2").addClass("tail");
        }
    });
});
});

それを単純化することは可能ですか？私は試しましたが、これまでの試みでは、コードが壊れています。

4

2 に答える 2

1

ある種のJSルーティングライブラリを使用していると思います。

これを試して： 

$(document).ready(function () {
    var tabInfo = {
            Hazel: {nonTail:'#tab2',tail:'#tab3, #tab4'},
            Red: {nonTail:'#tab3,#tab2',tail:'#tab4'},
            Pink: {nonTail:'#tab3,#tab4',tail:'#tab2'},
            Cyan: {nonTail:'#tab4',tail:'#tab2,#tab3'}
    };
    function makeChanges() {
       var loc = window.location.href; 
       for(var tab in tabInfo){
           if(loc.indexOf(tab) !== -1){
             $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p c").addClass(tab.toLowerCase().charAt(0));
             $(tabInfo[tab].nonTail).removeClass("tail");
             $(tabInfo[tab].tail).addClass("tail");
             break;
           }
        }
    }
    makeChanges();
    $(window).bind("hashchange", function () {
         makeChanges();
    });
});​
于 2012-06-14T12:28:58.380 に答える
0

ロケーション部分をテストする方法がわからなかったため、これはテストされていない疑似コードです。私はあなたの問題にオブジェクト指向のアプローチを取り、すべてのタブ構成をオブジェクトに移動しようとしました。

var tabs = [{
    "id": "#tab1",
    "color": "hazel",
    "removeTabIds": "#tab1,#tab2,#tab3,#tab4",
    "removeClasses": "r p c",
    "addClasses": "h",
    "removeTailIds": "#tab2",
    "addTailIds": "#tab3 #tab4"
}, { //Other tab configs go here ...
}];

$(document).ready(function(){
    var loc = window.location.href;
    var tab = getTab(loc);
    changeClasses(tab);
});

function getTab(loc){
    for (var i = 0; i < tabs.length; i++) {
        if (/tabs[i].color/.test(loc)) {
            return tab[i];
        }
    }
};

function changeClasses(tab){
    $(tab.removeTabIds).removeClass(tab.removeClasses).addClass(tab.addClasses);
    $(tab.removeTailIds).removeClass("tail");
    $(tab.addTailIds).addClass("tail");
};

function bindTab(tab){
    $(tab.id).click(function(){
        $(window).bind("hashchange", function(){
            var loc = window.location.href;
            var tab = getTab(loc);
            changeClasses(tab);
        });
    });
}
于 2012-06-14T12:01:18.650 に答える