Div內容消失後jquery.hide（）和顯示（）

-2

你好我有我的div內容消失jquery調用hide（）和show（）後，它消失的問題。Div內容消失後jquery.hide（）和顯示（）

<li class="gg3"><a class="link" href="#" data-rel="content3">Link1</a></li> 
<div class="content-container"> 
    <div id="content3" class="rightWrapperBookmarks"> 
     <c:forEach var="house" items="${user.houses}"> 
     <div class="houseBox"> 
      ${house.mailbox} 
      <br> ${house.house} 
      <br> ${house.address} 
      <br> 
      <br> 
      <a href="<c:url value="/profile.jsp"> 
      <c:param name="username" value="${house.username}" /> 
      </c:url>">Go to user profile</a> <br> <br> 
     </div> 
     </c:forEach> 
    </div> 
</div>

下面是我的jquery函數，它在我的div之間交換，以在我的頁面上顯示不同的內容。然而，在他們之間交換，使每個內容foreach消失。

$(document).ready(function() { 
    $(".link").click(function(e) { 
     e.preventDefault(); 
     $('.content-container div').hide(); 
     $('#' + $(this).data('rel')).show(); 
    }); 
});

如何讓這個內容持久隱藏和顯示？

來源

2015-09-26 JonCode

編輯我的帖子吧。 – JonCode

是啊忘了把它放進去。對不起！ – JonCode

我剛剛在[jsFiddle]（https://jsfiddle.net/vfd6bnnc/）中重新創建了這一點，並且所有內容都按預期工作 - DIV隱藏，但在通過Chrome中的開發工具檢查時隱藏了內容 –

變化

$('.content-container div').hide();

到：

$('.content-container > div').hide();

這只是隱藏眼前的孩子，不是所有的後裔資料覈實。

您遇到的問題是您正在顯示.content3，但其中的.houseBox DIV仍被原始.hide()隱藏。

來源

2015-09-26 11:15:39 Barmar

這很有道理！感謝您的:) – JonCode

你的處理CSS代碼。這裏這個CSS代碼添加。這裏這個碼的jsfiddle（https://jsfiddle.net/hyoeqwzL/）工作

.hide {display:none!important} 
.show {display:block!important}

這裏的javascript代碼

$(".link").on("click",function(e){ 
    e.preventDefault(); 
    $('.content-container div').addClass('hide').removeClass('show'); 
    console.log('#'+$(this).data('rel')) 
    $('#' + $(this).data('rel')).addClass('show').removeClass('hide'); 
    return false; 
});

來源

2015-09-26 11:21:48 bothsa24312

Div內容消失後jquery.hide（）和顯示（）

回答

相關問題