Question

我一直在寻找答案，似乎没什么关系。对不起，如果还有其他类似的问题。

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

我尝试过使用.replaceWith（）; .empty（）和append（）（和.appendTo（）），并发现以下工作，但只有一次。我对编码很陌生，因此我会非常感谢Laymans术语中的任何回复。：）

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

希望这是明确的，如果需要任何其他信息来帮助我，请告诉我。

Answer 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

Answer 2

我认为你可以显示/隐藏你的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消失时，您无法将其恢复为其他点击。

Answer 3

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

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

演示：Fiddle

Answer 4

<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: replace DIV contents with html from an external file. Full example?

使用.html（）替换<div> </div>中的文本

4 个答案: