交換和更改div內容並替換其他div內容

-2

點擊我的側欄菜單中的其中一個鏈接時，如何動態替換現有的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>

來源

2015-10-20 BobbyJones

所以基本上你什麼都沒有？ – adeneo

您忘記了在問題中輸入JavaScript代碼。 div內容從哪裏加載？ –

內容正在從ID的item1/item2/item3的div加載，即。如果用戶點擊「咖啡」，則要加載的動態內容爲ID爲＃item1 – BobbyJones

-1

如果這是表示你有內容的量，那麼我就不會擔心「移動」事到內容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; }

來源

2015-10-20 16:43:45

所以這個效果很好，但是如果我點擊一個新的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>

來源

2015-10-20 16:38:12 turbopipp

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

來源

2015-10-20 16:38:37

請解釋你的代碼。在SO上不提供代碼的答案。 –

交換和更改div內容並替換其他div內容

回答

相關問題