0

我一直在寻找这个问题的答案，似乎没有什么是相关的。对不起，如果有另一个类似的问题。

我试图将多个页面放在一个 index.html 页面上，因此我试图通过单击菜单按钮替换我的内容 div 中的文本。

我试过使用 .replaceWith(); .empty() 和 append() （和 .appendTo() ），并发现以下工作，但只有一次。我对编码很陌生，因此将不胜感激任何外行术语的回应。:)

我的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

我想你可以只显示/隐藏你的 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 回答
1

问题是您只分配实例而不是 div 的 html

尝试改变这一点：

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

对此：

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

问题是这种方法不正确，我建议您复制 div #textDiv2 和 #textDiv3 分配另一个 id，然后将其插入到您的 div 中，因为这样您可以拥有多个具有相同 id 的 div

于 2013-08-22T16:07:03.017 回答
1

无需为每个项目编写处理程序

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

演示：小提琴

于 2013-08-22T16:16:54.310 回答
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：用外部文件中的 html 替换 DIV 内容。完整的例子？

于 2013-08-22T16:08:43.623 回答