動態顯示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

回答

相關問題