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 回答