Question

我想根据加载的页面更改菜单颜色。我知道这很简单，支持服务器端语言，但这是我正在进行的HTML项目。所以我决定让HTML文件的名称被加载并相应地采取行动，但我在这种方法中遇到了一个奇怪的问题。让我解释一下。

我的菜单：

      <nav>
            <ul>
                <li><a class="menu-option" id="about" href="about.html">About</a></li>
                <li><a class="menu-option" id="trainer" href="#">Trainer / Consultant</a></li>
                <li><a class="menu-option" id="testimonial" href="#">Testimonials</a></li>
                <li><a class="menu-option" id="programs" href="#">Programs</a></li>
                <li><a class="menu-option" id="contact" href="#">Contact us</a></li>
            </ul>
        </nav>

JS

$(document).ready(function() {
    $("header").load("includes/header.html");
    $("footer").load("includes/footer.html");
    var page = location.pathname.split("/").slice(-1);
    switch (page[0])
    {
        case "about.html":
            $(".menu-option").css('color', 'white');
            $("#about").css('color', '#E45C02');
            break;
        case "trainer.html":
            $(".menu-option").css('color', 'white');
            $("#trainer").css('color', '#E45C02');
            break;
        case "programs.html":
            $(".menu-option").css('color', 'white');
            $("#programs").css('color', '#E45C02');
            break;
        case "testimonial.html":
            $(".menu-option").css('color', 'white');
            $("#testimonial").css('color', '#E45C02');
            break;
        case "contact.html":
            $(".menu-option").css('color', 'white');
            $("#contact").css('color', '#E45C02');
        default:
            $(".menu-option").css('color', 'white');
            break;
    }


});

使用Firebug我可以看到正在调用案例但是约束的颜色没有受到影响。所以我决定在about case

中添加一个警告

case "about.html":
            alert("about");
            $(".menu-option").css('color', 'white');
            $("#about").css('color', '#E45C02');
            break;

这件事按预期工作。我真的很困惑。为什么代码在没有alert语句的情况下失败？它扮演什么角色？我在这里失踪了什么？我需要暂停吗？

我也尝试将开关盒放在

中

$("header").ready(function(){
// Switch case here
// Still no luck !
});

Answer 1

这是因为.load（）是异步的，这意味着您需要等到加载完成后才能依赖加载的数据执行任何操作。

您可以发送一个函数作为.load（）的第二个参数运行，一旦加载数据就会调用它。然后你可以在该函数中运行switch语句。

示例：

$(document).ready(function() {

    function onHeaderLoaded() {
        var page = location.pathname.split("/").slice(-1);
        switch (page[0])
        {
            case "about.html":
                $(".menu-option").css('color', 'white');
                $("#about").css('color', '#E45C02');
                break;
            case "trainer.html":
                $(".menu-option").css('color', 'white');
                $("#trainer").css('color', '#E45C02');
                break;
            case "programs.html":
                $(".menu-option").css('color', 'white');
                $("#programs").css('color', '#E45C02');
                break;
            case "testimonial.html":
                $(".menu-option").css('color', 'white');
                $("#testimonial").css('color', '#E45C02');
                break;
            case "contact.html":
                $(".menu-option").css('color', 'white');
                $("#contact").css('color', '#E45C02');
            default:
                $(".menu-option").css('color', 'white');
                break;
        }

    }

    $("header").load("includes/header.html", onHeaderLoaded);
    $("footer").load("includes/footer.html");

});

更改菜单选项颜色取决于加载的HTML文件

1 个答案: