jQuery 在两个 Div 之间切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18110320/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle Between two Divs
提问by S Raihan
I am facing a Problem in making Some Toggle Effect with JQuery between Two divs . I am at very poor level on jQuery. and with that knowledge I failed to make to toggle between two divs .
我在使用 JQuery 在两个 div 之间制作一些切换效果时遇到了问题。我在 jQuery 上的水平很差。有了这些知识，我无法在两个 div 之间切换。
Current code in JS fiddle :http://jsfiddle.net/WSCBu/
JS小提琴中的当前代码：http: //jsfiddle.net/WSCBu/
I have Three Divs Class name Blue , Gray and orange . What I am trying to make is : when page loads Only two div Blue and Gray will Show and when I click the Text "Show" on Gray div The gray div will Hide and Orange Div will show . and When I click "Hide" text in Orange div this Orange div will Hide and again will show Gray div . May be it can be done with toggle function ? I am really not sure how . Hope for the Experts it may easy one ! I will very thankful if anyone Show me the process .
我有三个 Div 类名称蓝色、灰色和橙色。我想要做的是：当页面加载时，只有两个 div Blue 和 Gray 会显示，当我单击 Gray div 上的“显示”文本时，灰色 div 将隐藏，橙色 Div 将显示。当我在橙色 div 中单击“隐藏”文本时，此橙色 div 将隐藏并再次显示灰色 div 。可以用切换功能来完成吗？我真的不知道如何。希望高手们能轻松一把！如果有人向我展示过程，我将非常感激。
here is HTML
这是HTML
<div class="blue"></div>
<div class="gray">
<p> Show --> </p>
</div>
<div class="orange">
<p> -- Hide </p>
</div>
Css
css
.blue{
height:100px;
width:250px;
background:#1ecae3;
float:left;
}
.gray{
height:100px;
width:100px;
background:#eee;
float:left;
}
.orange{
height:100px;
width:150px;
background:#fdcb05;
float:left;
}
回答by Paul Roub
As you guessed, toggle()will do the job. When either .grayor .orangeis clicked, we toggle the visibility of both:
正如您所猜想的那样，toggle()将完成这项工作。当任一.gray或.orange点击，我们既切换的可见性：
$('.orange').hide();
$('.gray, .orange').on(
'click',
function()
{
$('.gray, .orange').toggle()
}
);
$('.orange').hide();
$('.gray, .orange').on('click',
function() {
$('.gray, .orange').toggle()
}
);.blue {
height: 100px;
width: 250px;
background: #1ecae3;
float: left;
}
.gray {
height: 100px;
width: 100px;
background: #eee;
float: left;
}
.orange {
height: 100px;
width: 150px;
background: #fdcb05;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
<div class="gray">
<p>Show --></p>
</div>
<div class="orange">
<p>-- Hide</p>
</div>回答by Tushar Gupta - curioustushar
$('.orange').hide();
$('.gray p').click(function(){
$('.gray').hide();
$('.orange').show();
});
$('.orange p').click(function(){
$('.gray').show();
$('.orange').hide();
});
Shorter code with .toggle()
更短的代码 .toggle()
$('.orange').hide();
$('.gray p,.orange p').click(function(){
$('.gray,.orange').toggle();
});
回答by Nishu Tayal
Use following js :
使用以下js：
jQuery('.gray').click(function(){
jQuery(this).hide();
jQuery('.orange').show();
});
jQuery('.orange').click(function(){
jQuery(this).hide();
jQuery('.gray').show();
});
Here is the working fiddle : http://jsfiddle.net/WSCBu/6/
这是工作小提琴：http: //jsfiddle.net/WSCBu/6/
回答by Icarus
回答by Vaibs_Cool
回答by Mangesh Parte
$('.orange').hide();
$(".gray p").click(function(){
$(".gray").hide();
$(".orange").show();
})
$(".orange p").click(function(){
$(".orange").hide();
$(".gray").show();
})
回答by V31
Add a class show to the two div and then you can use a toggle method. example http://jsfiddle.net/WSCBu/21/shown here.
给两个 div 添加一个类 show 然后就可以使用切换方法了。 此处显示的示例http://jsfiddle.net/WSCBu/21/。
<div class="blue"></div>
<div class="gray show" style="display:none";>
<p> Show --> </p>
</div>
<div class="orange show">
<p> -- Hide </p>
</div>
$(document).on('click','.show',function(){
$('.show').toggle();
});
回答by Faisal Mq
I guess it should as simple as the following code. Please forgive the code alignment. Answering it via my cell phone :)
我想它应该像下面的代码一样简单。请原谅代码对齐。通过我的手机接听:)
<style>
.blue{
height:100px; width:250px; background:#1ecae3; float:left; }
.gray{
height:100px; width:100px; background:#eee; float:left; }
.orange{ height:100px; width:150px; background:#fdcb05; float:left; display:none;}
</style>
<div class="blue"></div>
<div class="gray"> <p> Show --> </p> </div>
<div class="orange"> <p> -- Hide </p> </div>
<script>
$(".gray p").click(function() {
$(".gray").hide();
$(".orange").show();
});
$(".orange p").click(function() {
$(".gray").show()
$(".orange").hide();
} );
</script>
