Question

被要求制作一个SPA披萨店并遇到显示和隐藏功能的问题。只有主页始终显示

 <nav>
        <div>
            <ul>
                <li><a href="#home" id="navHome" class="links" rel="Home">Sicilian Home</a></li>
                <li><a href="#menu" id="navMenu" class="links" rel="Menu">Sicilian Menu</a></li>
                <li><a href="#about" id="navAbout" class="links" rel="About">Sicilian About</a></li>
            </ul>
        </div>
    </nav>

 $(document).ready(function ()
        {
            $("navHome").click(function (event) {
                $("home").show();
                $("menu", "about").hide();
            });
                $("navMenu").click(function (event) {
                    $("menu").show();
                    $("about", "home").hide();
                });
                $("navAbout").click(function (event) {
                    $("about").show();
                    $("home", "menu").hide();

                });
            }

Answer 1

您的CSS选择器不正确。根据您的HTML，您需要使用id选择器：

$("#navHome").click(function (event) {
    $("#home").show();
    $("#menu, #about").hide();
});
$("#navMenu").click(function (event) {
    $("#menu").show();
    $("#about, #home").hide();
});
$("#navAbout").click(function (event) {
    $("#about").show();
    $("#home, #menu").hide();
});

另外还有一点不同：$("menu", "about")表示“在about tag中找到菜单标记”，而$("#menu, #about")表示“找到带有id菜单的元素和带有id的元素”。

Answer 2

我复制了你的javascript和html来模拟这个问题。我在函数中添加了alert语句，以检查是否首先捕获了click事件。但是，警报声明本身并没有出现。

您需要对脚本进行以下两项更改才能正常工作：

前缀#，其中包含用于捕获点击事件的ID
脚本末尾缺少结束)

请在下面找到最终脚本：

$(document).ready(function ()
    {
        $("#navHome").click(function (event) {
            $("home").show();
            $("menu", "about").hide();
        });
        $("#navMenu").click(function (event) {
            $("menu").show();
            $("about", "home").hide();
        });
        $("#navAbout").click(function (event) {
            $("about").show();
            $("home", "menu").hide();
        });
    }
)

jquery导航显示和隐藏多个页面

2 个答案: