交换和更改div内容并替换其他div内容

问题描述：

点击我的侧栏菜单中的其中一个链接时，如何动态替换现有的div内容与其对应的div并将其重新加载到#content DIV？我是jQuery友好的。下面是HTML标记：交换和更改div内容并替换其他div内容

#container { 
    bottom: 0; 
    left: 0; 
    top: 0; 
    right: 0; 
    margin: auto; 
    position: absolute; 
    width: 900px; 
    height: 600px; 
} 
#list { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
#list li { 
    margin:0 0 10px 0; 
    background: grey; 
    padding: 3px; 
    cursor: pointer; 
} 
.item { 
    width: 100%; 
    height: 100%; 
    background: rgb(192,192,192); 
} 
#menu { 
    float: left; 
    width: 25%; 
    background-color: #ff99CC; 
    height: 100%; 
} 
#content { 
    float: left; 
    width: 75%; 
    background-color: rgb(192,192,192); 
    height: 100%; 
}

<div id="container">   
    <div id="menu"> 
     <ul id="list"> 
      <li>Coffee</li> 
      <li>Tea</li> 
      <li>Ice Cream</li> 
     </ul> 
    </div> 
    <div id="content"> 
     <div id="item1">Things about coffee...</div> 
     <div id="item2">Things about tea...</div>  
     <div id="item3">Things about ice cream...</div> 
    </div> 
</div>

所以基本上你什么都没有？ – adeneo

您忘记了在问题中输入JavaScript代码。 div内容从哪里加载？ –

内容正在从ID的item1/item2/item3的div加载，即。如果用户点击“咖啡”，则要加载的动态内容为ID为＃item1 – BobbyJones

答

如果这是表示你有内容的量，那么我就不会担心“移动”事到内容DIV。我只需切换各个项目的可见性，一次只能看到一个。（）并且如果列表项具有选择匹配项的数据属性:(（））（（）） <li data-show="#item1">Coffee</li>）

那么这应该工作：

$(document).ready(function(){ 
     //register this event handler on every li 
     $("li").click(function(){ 
      var $li = $(this); 
      var show_selector = $li.data("show"); // => "#item1" 
      $(".my-item").addClass("hidden"); //hide all 
      $(show_selector).removeClass("hidden"); //but show matching item 
    }); 
});

凡.hidden{ display:none; }

所以这个效果很好，但是如果我点击一个新的LI，那么这些项目（div）就会一直堆叠在一起，不应该隐藏用户以前的选择？ – BobbyJones

您是否在每个div上放置了class =“my-item hidden”？如果没有“我的项目”类，他们将不会被隐藏所有步骤选中。 –

答

使用了不同的内容隐藏层。 display: none;最初和$('.classofhidden').show();/$('.classofvisible').hide();

$('.content2').show();

div[class^='content'] { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div class="content1">1</div> 
 
<div class="content2">2</div> 
 
<div class="content3">3</div>

答

$("...").click(function(){ 
var div = $("#div1").html(); 
$("#div1").html($("#div2").html()); 
$("#div2").html(div); 
});

请解释你的代码。在SO上不提供代码的答案。 –

交换和更改div内容并替换其他div内容

相关推荐