stackoom
  简体   繁体   中英

Show a div and hide other when i click on an anchor button

 原文  2016-09-18 04:40:22  9   3    javascript/ jquery/ html/ css

Question

how can hide a div when i clicked on a button to show another 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. its my first time asking questions here and my English is not that good :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 answers

solution1
 2  2016-09-18 05:11:24

Use the .divs selector and call .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: 

$(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 . For example: 

<a href="#" class="button1 buttons" data-target=".div1">button 1</a>

Then, your JavaScript code would be reduced to: 

$(document).ready(function() {
    $('.buttons').on('click', function() {
        var target = $(this).data('target');

        $('.divs').not(target).slideUp();
        $(target).slideDown();
    });
});

Full example: https://jsfiddle.net/6jb3etjs/

solution2
 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). Then slide the corresponding div down. 

$(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;
 }

solution3
 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question show hide div onclick jquery slowly when i click the button AngularJS: show other div and hide current div on click of a button Show One Div and Hide Another Div when Click on button Show div on click on button, then hide this div when clicking outside of it Show/hide div on button click Show specific div when atag is click. And hide other divs Show a div on click and hide the other div and oposite How to show a div when I click on a button Show/hide div onclick jquery slowly when i click the asp button its not working Show Div 2 and Hide Div 1 on click on the same button
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM