Question

当我点击按钮显示另一个div时，如何隐藏div？

我只是想一次显示一个div，当你点击一个按钮并用滑动效果隐藏其余部分时，我希望我能让自己理解。这是我第一次在这里提问，我的英语不太好：C

我现在有这个，可怕的哈哈，我不是很好。

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

Answer 1

使用.slideUp()选择器并致电div。此外，您可以使用.not()方法仅选择其他div＆＃39; 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(); }); });（包括所选的一个）。：

data-target

<强>更新

您还可以按照Rik的建议，使用<a>元素上的<a href="#" class="button1 buttons" data-target=".div1">button 1</a>属性来简化代码。例如：

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

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

然后，您的JavaScript代码将缩减为：

{{1}}

完整示例：https://jsfiddle.net/6jb3etjs/

Answer 2

单击该按钮时，按公共类撤消所有div（已隐藏的那些将保持这种方式）。然后滑动相应的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();
     });

});

让它们全部隐藏起来：

.divs {
    height: 400px;
    color: whitesmoke;
    display: none;
 }

Answer 3

试试这个：

$(document).ready(function(){

    $(".buttons").on("click",function(){

        var which = $(this).index();

        $(".divs").slideUp(500);

        $(".divs").eq(which).slideDown(500);

    }) 
})

最终代码：

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

当我点击一个锚点按钮时显示一个div并隐藏其他

3 个答案: