打開另一個JS關閉時關閉JS切換div，並點擊更改圖像

我是JavaScript新手。目前，我正在爲我的網站開發一個小型切換器。打開另一個JS關閉時關閉JS切換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>

你的幫助是極大的讚賞！

來源

2017-12-18 Luuk van Driel

在開始切換之前，您只需滑動所有內容即可。

對於離

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

來源

2017-12-18 14:40:12

這是一個非常簡單的解決方案的開始，謝謝一堆！你還知道當div按鈕處於活動狀態時我可以如何顯示不同的圖像？ –

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

這將使小號搜索引擎/屏幕閱讀器來閱讀你的按鈕元素，你可以使懸停效果等

來源

2017-12-18 14:56:55 JamieMcGrory

謝謝！我真的是一個初學者，你們多瞭解我！ –

打開另一個JS關閉時關閉JS切換div，並點擊更改圖像

回答

相關問題