我点击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>
答案 0 :(得分:0)
这样的东西?
$(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>