Question

我正在尝试使用.load函数创建一个菜单，但我不知道如何更改它正在使用的页面。

这就是我的......

的index.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    </head>
    <body>
        <div id="header"></div>
        <div id="menu"></div>
        <div id="main"></div>
        <script>
            $("#header").load("header.html");
            $("#menu").load("menu.html");
            $("#main").load("main.html");
        </script>
    <body>
</html>

menu.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/menu.css">
    </head>
    <body>
        <div class="menu-item">
            <div class="menu-text" id="menu-item1">
                Click me!
            </div>
        </div>
    <body>
</html>

因此，当点击 menu.html 中的div id“menu-item1”时，它应该在 index.html $("#main").load("main.html");更改为$("#main").load("OTHERmain.html"); >例如。

Answer 1

充分利用data-attributes这样的优势：

<div class="menu-text" id="menu-item1" data-navigate="OTHERmain.html">
    Click me!
</div>

然后你的jquery可能是：

$(".menu-item div").click(function(){
    $("#header").load($(this).data("navigate"));
});

修改：

要在单击menu-text元素时进行更改，您必须订阅click事件：

$("#menu-item1").click(function(){ $("#main").load("OTHERmain.html"); });

现在，您必须确保所有这些代码都包含在document.ready事件中：

$(function(){ $("#menu-item1").click(function(){ $("#main").load("OTHERmain.html"); }); });

Answer 2

试试这个：

<div class="menu-text" id="menu-item1" data-navigate="OTHERmain.html">
    Click me!
</div>

jQuery的：

$(document).on("click",".menu-item div",function(){
    $("#main").load($(this).data("navigate"));
});

在处理动态加载的元素时应该使用委托事件，因为它简化了逻辑。有关详细信息，请查看$.on

Jquery更改.load位置

2 个答案: