0

私はこれに対する答えをずっと探していましたが、何も関連していないようです。他にも同じような質問がありましたら申し訳ありません。

index.html ページだけに複数のページを配置しようとしているため、メニュー ボタンをクリックしてコンテンツ div 内のテキストを置き換えようとしています。

私は .replaceWith(); を使ってみました。.empty() および append() (および .appendTo() ) を使用して、以下が機能することがわかりましたが、1 回だけです。私はコーディングにまったく慣れていないため、素人の言葉での回答は大歓迎です。:)

私の HTML: ......

<div id="menubar">
            <ul>
            <a href="index.html"><h6>Home</h6><a/>
            <h6 id="buildServ">Building Services</h6>
            <h6 id="maintServ">Maintenance and Handyman Services</h6>
            <h6>Garden Services</h6>
            <h6>Gallery</h6>
            <h6>Contact Me</h6>
            </ul>
</div>
<div id="content" style="padding:10px;marginleft:50px;width:40%;height:auto;float:left;border:3px solid white;border-radius:15px;background-image:url('menuGrad.jpg');background-repeat:repeat-x;behavior: url('PIE.htc');">

            <div id="textDiv">
                <p>this is where the homepage text will go</p>
        </div><!-- textDiv -->

            <div id="textDiv2" style="display:none;">
                <p>this is where the building services text will go</p>
            </div><!-- textDiv2 -->

                <div id="textDiv3" style="display:none;">
                    <p>this is where maintenance services text will go</p>
                </div><!-- textDiv3 -->

        </div><!-- content -->

そしてjQuery：...

                    <script>
        $("#buildServ").click(function(){
            $("#content").html($("#textDiv2"));
            $("#textDiv2").show();
            });
        $("#maintServ").click(function(){
            $("#content").html($("#textDiv3"));
            $("#textDiv3").show();
            });

        </script>

#buildServ をクリックすると機能しますが、 #maintServ をクリックして #buildserv に戻ろうとすると、 #content がクリアされます。

これが明確であることを願っています。他の情報が必要な場合はお知らせください。

4

4 に答える 4

1

各アイテムのハンドラを記述する必要はありません

$textDivs = $('#content > div')
$("#menubar ul > *").click(function(){
    $textDivs.hide();
    $textDivs.eq($(this).index()).show();
    return false;
});

デモ:フィドル

于 2013-08-22T16:16:54.310 に答える
1

divを表示/非表示にすることができると思います...

お気に入り：

$("#buildServ").click(function () {
    $("#content > div").hide()
    $("#textDiv2").show();
});
$("#maintServ").click(function () {
    $("#content > div").hide()
    $("#textDiv3").show();
});

コードの問題は、非表示の div が #content div 内にあり、その html を置き換えていることです。その$("#content").html($("#textDiv3"));ため、コンテンツ内の他のすべての div を実行すると、それらを他のクリックに戻すことができなくなります。

于 2013-08-22T16:09:00.440 に答える
0 
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
           $(document).ready(function(){
               $('#selectedTarget').load('includes/contentSnippet.html');
           });
        </script>   
    </head>
    <body>
        <div id="selectedTarget">
            Existing content.
        </div>
    </body>
</html>

JQuery: DIV コンテンツを外部ファイルの html に置き換えます。完全な例？

于 2013-08-22T16:08:43.623 に答える