使 JS 切换 div 在另一个打开时关闭，并在单击时更改图像

Question

我是 JavaScript 的新手。目前，我正在为我的网站做一个小切换。

目标是使用三个按钮打开包含信息的不同部分。我在我的网站上有这个工作。现在，我想要实现的是在打开其他 div 时关闭其他 div。此外，我希望第一个 div 在页面加载时打开，包括按钮上的指示器（例如橙色图像）。你能帮我解决这个问题吗？

出于某种原因，该脚本在我的网站上有效，但在 JSfiddle 上无效： https://jsfiddle.net/q7evaLsn/1/

当前代码：

 
$('.button1').click(function(){
    $('.product').slideToggle('slow');   
});

$('.button2').click(function(){
    $('.lockedin').slideToggle('slow');   
});

$('.button3').click(function(){
    $('.developers').slideToggle('slow');   
});

.button2
{
  padding-top: 10px;
}
.button3
{
  padding-top: 15px;
}

<h3>
    <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/> 
</h3>
<h3>
    <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/> 
</h3>
<h3>
    <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/> 
</h3>

<div class="product">
    Testdiv1
</div>

<div class="lockedin">
    Testdiv2
</div>

<div class="developers">
    Testdiv3
</div>

非常感谢您的帮助！

Answer 1

您可以在开始切换之前简单地向上滑动所有内容。

前任

   $('.button3').click(function(){
     $('.product').slideUp();
     $('.lockedin').slideUp();
     $('.developers').slideToggle('slow');   
   });

Answer 2

您的 JSfiddle 无法正常工作，因为您没有包含某些函数所需的 jQuery 库。为了将来参考，jQuery 是一个流行的 javascript 库，它简化和扩展了一些基本的 javascript 功能，您可以互换使用两者，但是如果您确实想要 jQuery 的额外功能那么您必须像这样将其包含在 HTML:

中

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

如@SURESH 所述，您可能希望将其他区域向上滑动以切换目标区域：

$('.example-button').click(function(){
  $('.section-to-hide-1').slideUp();
  $('.section-to-hide-2').slideUp();
  $('.section-to-toggle-1').slideToggle();
});

作为进一步的格式化建议，您的图像（充当按钮）位于 header 个标签中。

通常将这些 header 标签用于任何内容都是不好的做法除了 headings/titles
我建议使用 A 标签甚至 BUTTON 标签来完成同样的工作

我尽量不要将 IMG 标签用作本质上的文本按钮，您将能够像这样类似地设置按钮样式：

<button class="button1">Products</button>

<style>
  .button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000;  }
</style>

这将允许搜索 engines/screen 读者阅读您的按钮元素，并且您可以制作悬停效果等。

使 JS 切换 div 在另一个打开时关闭，并在单击时更改图像

Making a JS toggle div close when another is opened, and change image on click

html

javascript

toggle