使用 .html() 替换 <div> 中的文本答案

【问题标题】：Using .html() to replace text in a <div>使用 .html() 替换 <div> 中的文本
【发布时间】：2013-08-23 00:16:54
【问题描述】：

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

我试图将多个页面放在一个 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。

希望这很清楚，如果需要任何其他信息来帮助，请告诉我。

【问题讨论】：

api.jquery.com/html

标签： jquery html replacewith

【解决方案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 p>

【讨论】：

这行得通吗？如果替换#content的html，就没有#textDiv2、#textDiv3等了
@Sergio 是对的，这只会工作一次。在那个 textDiv2 之后，textDiv3 将被替换
我写过这不是制作这个逻辑的正确方法！我只有对 OP 问题的回答，我认为没有必要投反对票，但是...... @Sergio
@AlessandroMinoccheri，OP 抱怨它只在第一次点击时有效，第二次无效。第一次点击后你的答案有效吗？
感谢您的回复，但是我现在已经完全改变了这一点，而是使用 jquery ui 选项卡系统。

【解决方案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 都会消失，并且您无法将它们恢复为其他点击。

【讨论】：

这是最好的答案方法

【解决方案3】：

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

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

演示：Fiddle

【讨论】：

对此+1。 OP要记住菜单链接的顺序和数量必须和div一致。
@Sergio 是的...它基于索引
谢谢你，效果很好，但是由于客户的需要，我现在改用 jquery ui 选项卡系统。 :)

【解决方案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?

【讨论】：