0

.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");れます。

4

2 に答える 2

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 に答える
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 要素をクリックしたときに変更するには、クリック イベントをサブスクライブする必要があります。

$("#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 に答える