javascript - 使容器在消失后出现并带有按钮

Question

我点击一个 div 容器(它消失了)，另一个带有按钮的容器出现了。然后，我想使用由 div 容器组成的按钮返回到之前的 div 容器(请记住，我只想在currentTarget).

我只想对当前容器或点击的容器执行此操作!

$(document).ready(() => {
    $('.shown').on('click', event => {
      $(event.currentTarget).next('.tab').show();
      $(event.currentTarget).hide();
    });

    $('.button').on('click', event => {
      /*i want to hide the container with class tab and show the container with class shown*/
    });
});

.shown {
  width: 400px;
  height: 100px;
  background-color: green;
}

.con {
  width: auto;
  height: auto;
  border: 1px solid black;
}

.main {
  width: auto;
  height: 170px;
  background-color: red;
  margin-top: 10px;
  padding: 5px 10px;
}

.tab {
  width: 400px;
  height: 100px;
  background-color: blue;
  display: none;
}

p {
  display: inline-block;
}

.button {
  width: 50px;
  background-color: white;
  border: 5px dotted white;
  padding: 3px 5px;
  margin: 0px 10px;
}

<div class="main">
  <div class="con">
    <div class="shown">

    </div>
    <div class="tab">
      <p>One</p>
      <div class="button">Show</div>

    </div>

  </div>
</div>

<div class="main">
  <div class="con">
    <div class="shown">

    </div>
    <div class="tab">
      <p>Two</p>
      <div class="button">Show</div>
    </div>
  </div>
</div>

<div class="main">
  <div class="con">
    <div class="shown">

    </div>
    <div class="tab">
      <p>Three</p>
      <div class="button">Show</div>
    </div>
  </div>
</div>

Answer 1

是这样的吗？

$(document).ready(()=>{
				
				
				
				$('.shown').on('click',event=>{
					 $(event.currentTarget).next('.tab').show();
					 $(event.currentTarget).hide();
				});
				
				$('.button').on('click',event=>{
					/*i want to hide the container with class tab and show the container with class shown*/
          $('.tab').hide();
          $('.shown').show();
					
				});
				

			});

.shown{
				width: 400px;
				height: 100px;
				background-color: green;
			}
			
			.con{
				width: auto;
				height: auto;
				border: 1px solid black;
			}
			.main{
				width: auto;
				height: 170px;
				background-color: red;
				margin-top: 10px;
				padding: 5px 10px;
			}
			
			.tab{
				width: 400px;
				height: 100px;
				background-color: blue;
				display: none;
			}
			
			p{
				display: inline-block;
			}
			
			.button{
				width: 50px;
				background-color: white;
				border: 5px dotted white;
				padding: 3px 5px;
				margin: 0px 10px;
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="main">
			<div class="con">
				<div class="shown">
					
				</div>
				<div class="tab"><p>One</p>
					<div class="button">Show</div>
					
				</div>
				
			</div>
		</div>
		
		<div class="main"> 
			<div class="con">
				<div class="shown">
					
				</div>
				<div class="tab"><p>Two</p>
					<div class="button">Show</div>
				</div>
			</div>
		</div>
		
		<div class="main">
			<div class="con">
				<div class="shown">
					
				</div>
				<div class="tab">
					<p>Three</p>
					<div class="button">Show</div>
				</div>
			</div>
		</div>