Question

我正在使用下面的显示/隐藏代码。我工作正常，文字格式正在丢失。反正是为了防止这种情况？我有一些标记样式和样式表编码

    <div id="fillit"></div>

    <a href="javascript:void(0)" class="para">Sci Lit 1</a>
    <div class="details">text for sci lit 1</div> 
    <a href="javascript:void(0)" class="para">Sci Lit 2</a>
    <div class="details">text for sci lit 2</div>    
    <a href="javascript:void(0)" class="para">Sci Lit 3</a>
    <div class="details">text for sci lit 3</div>   

<style>
.inner-boxes .box3, .details1 {display:none;}
</style>
<script>
$(function(){
    $(".para").click(function(){
        $("#fillit").text($(this).next(".details1").text()); 
    });
    $(".details1:first").clone().appendTo("#fillit").show();    
});
</script>

Answer 1

使用.html（）而不是.text（）

变化：

$("#fillit").text($(this).next(".details1").text());

为：

$("#fillit").html($(this).next(".details1").html());

这是example

Answer 2

你的脚本中有

：

$(".para").click(function(){
    $("#fillit").text($(this).next(".details1").text()); 
});

更改为：

$(".para").click(function(){
    $("#fillit")
        .children(".details1")
        .replaceWith(
            $(this).next(".details1").clone().show()
        ); 
});

.text()只获取元素的内部文本

注意：正如评论中所指出的那样，这不是唯一的方式，甚至可能不是最快的。（我自己没有对它进行过任何测试）但在我看来，这完全是关于风格的。我的答案的优点是该解决方案可以在许多不同的场景中工作。

使用show / hide时丢失div格式/格式

2 个答案: