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

Question

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

目标是有三个按钮，打开信息的不同部分。我在我的网站上工作。现在，我想要实现的是在其他人开放的时候让其他的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(); 
}); 

正如进一步格式的建议，你有你的图像（即正在采取行动作为按钮）在标题标签内。

• 这是一般不好的做法，使用这些标题标签的东西 除了标题/标题
• 我会建议使用的标签，甚至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> 
  

这将使小号搜索引擎/屏幕阅读器来阅读你的按钮元素，你可以使悬停效果等