使用jQuery隐藏父div并显示另一个 [英] Hide parent div with jQuery and show another

问题描述

我有一个包含多个div内容的容器.我需要能够单击切换"元素并隐藏此父div，同时显示隐藏在下面的新div.我曾想通过点击事件来做到这一点，但我不确定如何定位两个div.

I have a container that has several divs with content. i need to be able to click "switch" element and hide this parent div and at the same time show new div that is hidden below. I thought of doing it with click event but I am not sure how to target the two divs.

$('.change').click(function() {
      $(this).parent("div").hide().next("div").show();
});


<div id="container">
   <div>
      old content abc <span class="change">switch</span>
   </div>
   <div>
      new content abc  
   </div>

   <div>
      old content 123 <span>switch</span>
   </div>
   <div>
      new content 123  
   </div>

</div>

推荐答案

工作正常^ _ ^.看这里: http://jsfiddle.net/maniator/VnSwk/

it works fine ^_^. look here: http://jsfiddle.net/maniator/VnSwk/

我想说用js做一个改变:

I would say make one change with the js:

$('.change').click(function() {
    $this = $(this)
    $(this).parent("div").hide().next("div").show().append($this);
});
$('#container').children().hide();
$($('#container').children()[0]).show();

这篇关于使用jQuery隐藏父div并显示另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！