Question

我是JavaScript新手。目前，我正在为我的网站进行小型切换。

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

出于某种原因，脚本可以在我的网站上运行，但不适用于JSfiddle： https://jsfiddle.net/q7evaLsn/1/

当前代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

非常感谢您的帮助！

Answer 1

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

前者

pip install textblob

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

正如进一步的格式化建议一样，您可以在标题标记中包含图像（充当按钮）。

将这些标头标签用于任何事情通常都是不好的做法除标题/标题外
我建议使用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>

这将允许搜索引擎/屏幕阅读器读取你的按钮元素，你可以制作悬停效果等。

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

2 个答案: