javascript - 具有相似功能时简化 Javascript

标签 javascript jquery tabs simplify simplification

<分区>

我终于拼凑了一些适用于我的问题的代码 here .但是，它看起来很长，因为我已经为刷新具有特定哈希的页面以及通过单击选项卡访问同一页面的时间创建了单独的函数。

$(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");
        }
    });
});
});

可以简化吗？我已经尝试过，但到目前为止，我的尝试只是破坏了代码。

最佳答案

我假设您正在使用某种 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();
    });
});

关于javascript - 具有相似功能时简化 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11030095/

上一篇：javascript - WMD - 获取 Markdown 文本

下一篇：javascript - 需要找到向网格上的某物移动的方程式

javascript - ASP.NET MVC 3 将请求重定向到根页面

flutter - Flutter:如何根据选择的选项卡在滑动时更改选项卡栏之外的文本

javascript - 如何在 Java 中使用 Selenium 访问弹出元素

javascript - Firefox 在其请求中发送什么 HTML5 GeoLocation 数据？

javascript - 如何从 document.getElementById javascript 制作下拉菜单

jquery - 使用 jQuery UI 选项卡。如何使选项卡之一链接到 URL 而不是加载选项卡面板？

javascript - 如何同步单独 iframe 中的两个文本区域？

jquery - Ajax调用、响应处理问题

javascript - 我的 html 页面的选项卡内的另一个 html 页面的选项卡 - 网络应用程序用户界面