0

我正在尝试使用 .load 功能制作菜单，但我不知道如何更改它正在使用的页面。

这就是我所拥有的...

索引.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>

菜单.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" 时，它应该例如更改$("#main").load("main.html");为index.html$("#main").load("OTHERmain.html");中的。

4

2 回答 2

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");
    });
});
于 2013-08-18T08:23:06.567 回答
1

尝试这个：

<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

于 2013-08-18T08:44:45.497 回答