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

当我点击一个按钮来显示另一个div时，如何隐藏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>

来源

2016-09-18 marlonspr

非常感谢所有的，这是非常有用的。 – marlonspr

当单击该按钮，通过它们的通用类收回所有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; 
}

来源

2016-09-18 04:57:13

使用.divs选择和调用.slideUp()。此外，而不是向上滑动全部div的（包括选择一个），你可以使用.not()方法只选择其他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：

你可以如Rik所示，通过在<a>元素上使用data-target属性来简化代码。例如：

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

然后，你的JavaScript代码将被简化为：

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

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

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

来源

2016-09-18 05:11:24 felipeptcho

我建议在按钮上添加一个“数据切换”按钮，这样就可以使该方法成为通用的。 – Rik

是的。我曾考虑过这个问题。我根据你的建议更新了答案。 :) – felipeptcho

试试这个：

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

来源

2016-09-18 05:33:38 Ehsan

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

回答

相关问题