Question

点击我侧边栏菜单上的其中一个链接，如何动态地将现有release:prepare内容与其相应的div内容交换出来并将其加载回div DIV？我是jQuery友好的。这是HTML标记：

#content

#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%;
}

Answer 1

对不同的内容使用隐藏的div。最初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>

Answer 2

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

Answer 3

如果这表明您拥有的内容数量，那么我不会担心将内容转移到内容div中。我只想切换各种项目的可见性，一次只能看到一个。

如果项目div有一个类，比如'my-item'来帮助选择它们，一个隐藏的类来隐藏它们，（<div id="item1" class="hidden my-item">Something about coffee...</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; }

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

3 个答案: