Question

我需要能够拥有一个display-div，并将内容从该页面的其他div without refreshing加载到该单个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容器中。我该如何处理这个问题？

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

然而，将现有HTML复制到另一个元素似乎有点多余，只是为了使其可见，如果该内容已经在DOM中。为什么不隐藏/显示它，如下所示：

＆＃13;

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

＆＃13;

.item { display: none; }

＆＃13;

<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>

＆＃13;

Answer 2

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

您现在只需要在onclick =＆＃34;＆＃34;中调用moveToDisplayDiv（＆＃39;您已设置为元素的ID）功能。将触发移动的项目的属性。请注意，您必须使用他们的id =＆＃34;＆＃34;属性，而不是类=＆＃34;＆＃34;属性在你的情况下，我认为它是Item1，Item2，Item3等......

Answer 3

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>

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

3 个答案: