单击锚点按钮时显示div并隐藏其他
[英]Show a div and hide other when i click on an anchor button
问题描述
how can hide a div when i clicked on a button to show another div? 
当我单击按钮以显示另一个div时如何隐藏div？
I just want to show one div at a time when you click on a button and hide the rest with a slide-up effect, I hope I made myself understood. 当您单击一个按钮时，我只想一次显示一个div，并用上滑效果隐藏其余部分，我希望我能使自己理解。 its my first time asking questions here and my English is not that good :C 这是我第一次在这里提问，我的英语不太好：C
I have this now and its terrible haha im not very good. 我现在有这个，它的可怕哈哈不是很好。
$(document).ready(function() { $('.button1').on('click', function() { $('.div1').slideToggle(); }); $('.button2').on('click', function() { $('.div2').slideToggle(); }); $('.button3').on('click', function() { $('.div3').slideToggle(); }); $('.button4').on('click', function() { $('.div4').slideToggle(); }); });
* { margin: 0; padding: 0; } .toggler-wrap { background-color: royalblue; } .buttondiv { display: flex; justify-content: space-around; padding: 20px; } .buttons { padding: 10px 30px; display: block; border: 3px solid whitesmoke; color: whitesmoke; text-align: center; font-family: cursive; text-decoration: none; border-radius: 5px; font-weight: bold; } .buttons:hover { background-color: whitesmoke; color: royalblue; } .divs { height: 400px; color: whitesmoke; font-family: cursive; text-align: center; line-height: 400px; font-size: 500%; display: none; } .div1 { background-color: orange; } .div2 { background-color: green; } .div3 { background-color: red; } .div4 { background-color: purple; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="Toogler.css"> <title></title> </head> <body> <div class="toggler-wrap"> <div class="buttondiv"> <a href="#" class="button1 buttons">button 1</a> <a href="#" class="button2 buttons">button 2</a> <a href="#" class="button3 buttons">button 3</a> <a href="#" class="button4 buttons">button 4</a> </div> <div class="div1 divs">Div1</div> <div class="div2 divs">Div2</div> <div class="div3 divs">Div3</div> <div class="div4 divs">Div4</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript" src="Toogler.js"></script> </body> </html>
3 个解决方案
解决方案1
2 2016-09-18 05:11:24
Use the .divs selector and call .slideUp() . 使用.divs选择器并调用.slideUp() 。 Also, instead of sliding up all the div 's (including the selected one), you can use the .not() method to select only the other div 's: 另外，您可以使用.not()方法仅选择其他div ，而不是向上滑动所有div （包括所选的div ）：
$(document).ready(function(){
$('.button1').on('click', function(){
$('.divs').not('.div1').slideUp();
$('.div1').slideDown();
});
$('.button2').on('click', function(){
$('.divs').not('.div2').slideUp();
$('.div2').slideDown();
});
$('.button3').on('click', function(){
$('.divs').not('.div3').slideUp();
$('.div3').slideDown();
});
$('.button4').on('click', function(){
$('.divs').not('.div4').slideUp();
$('.div4').slideDown();
});
});
UPDATE: 更新：
You can also simplify the code by using a data-target attribute on the <a> element, as suggested by Rik . 您也可以按照Rik的建议，通过在<a>元素上使用data-target属性来简化代码。 For example: 例如：
<a href="#" class="button1 buttons" data-target=".div1">button 1</a>
Then, your JavaScript code would be reduced to: 然后，您的JavaScript代码将简化为：
$(document).ready(function() {
$('.buttons').on('click', function() {
var target = $(this).data('target');
$('.divs').not(target).slideUp();
$(target).slideDown();
});
});
Full example: https://jsfiddle.net/6jb3etjs/ 完整示例： https ： //jsfiddle.net/6jb3etjs/
解决方案2
0 2016-09-18 04:57:13
When the button is clicked, retract all divs by their common class (those already hidden will stay this way). 单击该按钮后，按其通用类撤回所有div（那些已经隐藏的div将保持这种状态）。 Then slide the corresponding div down. 然后向下滑动相应的div。
$(document).ready(function(){
$('.button1').on('click', function(){
$('.divs').slideUp();
$('.div1').slideDown();
});
$('.button2').on('click', function(){
$('.divs').slideUp();
$('.div2').slideDown();
});
$('.button3').on('click', function(){
$('.divs').slideUp();
$('.div3').slideDown();
});
$('.button4').on('click', function(){
$('.divs').slideUp();
$('.div4').slideDown();
});
});
To make them all begin as hidden: 要使它们全部开始为隐藏状态：
.divs {
height: 400px;
color: whitesmoke;
display: none;
}
解决方案3
0 2016-09-18 05:33:38
Try this : 尝试这个 ：
$(document).ready(function(){
$(".buttons").on("click",function(){
var which = $(this).index();
$(".divs").slideUp(500);
$(".divs").eq(which).slideDown(500);
})
})
Final code : 最终代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } .toggler-wrap { background-color: royalblue; } .buttondiv { display: flex; justify-content: space-around; padding: 20px; } .buttons { padding: 10px 30px; display: block; border: 3px solid whitesmoke; color: whitesmoke; text-align: center; font-family: cursive; text-decoration: none; border-radius: 5px; font-weight: bold; } .buttons:hover { background-color: whitesmoke; color: royalblue; } .divs { height: 400px; color: whitesmoke; font-family: cursive; text-align: center; line-height: 400px; font-size: 500%; display: none; } .div1 { background-color: orange; } .div2 { background-color: green; } .div3 { background-color: red; } .div4 { background-color: purple; } </style> <title></title> </head> <body> <div class="toggler-wrap"> <div class="buttondiv"> <a href="#" class="button1 buttons">button 1</a> <a href="#" class="button2 buttons">button 2</a> <a href="#" class="button3 buttons">button 3</a> <a href="#" class="button4 buttons">button 4</a> </div> <div class="div1 divs">Div1</div> <div class="div2 divs">Div2</div> <div class="div3 divs">Div3</div> <div class="div4 divs">Div4</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $(document).ready(function(){ $(".buttons").on("click",function(){ var which = $(this).index(); $(".divs").slideUp(500); $(".divs").eq(which).slideDown(500); }) }) </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.