动态显示div的内容在另一个div

我需要能够有一个显示div，并加载内容到该单个div，从其他div div without refreshing页面。比方说，我有以下结构：动态显示div的内容在另一个div

Nav-div   Display-div 
-------------- ------------- 
|   | |   | 
| >>item1<< | |content for | 
| item2 | | item1 | 
| item3 | |   |  
|   | |   | 
|   | |   | 
|   | |   | 
-------------- --------------

的jQuery：

$("a.menu").click(function() { 
    var clicked = '#' + $(this).attr('title'); 
    $('.toggle:not('+clicked+')').hide(1000); 
    $(clicked).show(1000); 
});

HTML：

<div class="ShowClickedContent"> 
<!-- This Would be the display-div --> 
</div> 

<nav> 
    <a href="#" title="item1" class="menu"> 
    <a href="#" title="item2" class="menu"> 
    <a href="#" title="item3" class="menu"> 
</nav> 

<div class="item1" style="display:none;"> 
    <p> the content here will be loaded into the ShowClickedContent div </p> 
</div> 
<div class="item2" style="display:none;"> 
    <p> the content here will be loaded into the div </p> 
</div> 
<div class="item3" style="display:none;"> 
    <p> the content here will be loaded into the div </p> 
</div>

截至目前，我只能得到的div自己在展现自己自己的容器，但不在showClickedContent容器中。我将如何解决这个问题？

来源

2017-03-17 Joel

执行此操作的最简单方法是使用a元素的href属性来保存目标div元素的id。从那里你可以设置.ShowClickedContent div的HTML匹配。试试这个：

$("a.menu").click(function(e) { 
 
    $('.ShowClickedContent').html($($(this).attr('href')).html()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ShowClickedContent"></div> 
 

 
<nav> 
 
    <a href="#item1" class="menu">item1</a> 
 
    <a href="#item2" class="menu">item2</a> 
 
    <a href="#item3" class="menu">item3</a> 
 
</nav> 
 

 
<div id="item1" style="display: none;"> 
 
    <p>the content here will be loaded into the ShowClickedContent div</p> 
 
</div> 
 
<div id="item2" style="display: none;"> 
 
    <p>the content here will be loaded into the div #1</p> 
 
</div> 
 
<div id="item3" style="display: none;"> 
 
    <p>the content here will be loaded into the div #2</p> 
 
</div>

但是似乎有点多余，以现有的HTML复制到另一个元素只是为了使其可见，如果该内容已经在DOM。为什么不隐藏/显示它可以根据需要，像这样：

$("a.menu").click(function(e) { 
 
    $('.item').hide(); 
 
    $($(this).attr('href')).show(); 
 
});

.item { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="item1" class="item"> 
 
    <p>the content here will be loaded into the ShowClickedContent div</p> 
 
</div> 
 
<div id="item2" class="item"> 
 
    <p>the content here will be loaded into the div #2</p> 
 
</div> 
 
<div id="item3" class="item"> 
 
    <p>the content here will be loaded into the div #2</p> 
 
</div> 
 

 
<nav> 
 
    <a href="#item1" class="menu">item1</a> 
 
    <a href="#item2" class="menu">item2</a> 
 
    <a href="#item3" class="menu">item3</a> 
 
</nav>

来源

2017-03-17 12:03:19

嘿，谢谢。但是，第二种解决方案会导致我想要避免的确切问题。另外，我将如何在您提供的第一个示例中为开关设置动画？到目前为止，没有任何延迟（就像我在写我写的jQuery代码时那样）。 – Joel

嘿，再次，如果你能为我提供解决我上面的问题，我可以将其标记为答案。 – Joel

function moveToDisplayDiv(elementId){ 
    $("#Nav-Div").remove(elementId); 
    $("#Display-Div").append(elementId); 
}

现在，您只需要拨打moveToDisplayDiv（“你设置成元素的ID”）在触发移动的项目的onclick =“”属性中发挥作用。请注意，你必须要用自己的ID =“”属性，而不是类=“”属性在你的情况，我认为它是项目1，项目2，项目3等等

来源

2017-03-17 12:09:42

function show(obj) { 
 
    var title = $(obj).attr('title'); 
 
    $(".ShowClickedContent").empty(); 
 
    $(".ShowClickedContent")[0].innerHTML = $("." + title)[0].innerHTML; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="ShowClickedContent"> 
 
<!-- This Would be the display-div --> 
 
</div> 
 

 
<nav class="navbar navbar-default"> 
 
    <ul class="nav navbar-nav"> 
 
    <li><a href="#" title="item1" class="menu" onClick="show(this)"> item 1</li> 
 
    <li><a href="#" title="item2" class="menu" onClick="show(this)"> item 2</li> 
 
    <li><a href="#" title="item3" class="menu" onClick="show(this)"> item 3</li> 
 
    </ul> 
 
</nav> 
 

 
<div class="item1" style="display:none;"> 
 
    <p> item1 the content here will be loaded into the ShowClickedContent div </p> 
 
</div> 
 
<div class="item2" style="display:none;"> 
 
    <p> item2 the content here will be loaded into the div </p> 
 
</div> 
 
<div class="item3" style="display:none;"> 
 
    <p> item3 the content here will be loaded into the div </p> 
 
</div>

来源

2017-03-17 12:26:00

动态显示div的内容在另一个div

回答

相关问题