當某個div顯示時更改div的背景顏色

-1

我有三個div用於Twitter帖子，Facebook帖子和LinkedIn帖子，這些組成了一個輪播。當某個div顯示時更改div的背景顏色

這些然後在另一個名爲＃social-media-feeds的div中。

我想知道是否可以更改＃社交媒體飼料的背景顏色基於哪個div在旋轉木馬顯示。

因此，當twitter div顯示我希望＃social-media-feeds的背景顏色爲＃00aced時，當facebook div顯示我希望背景顏色爲＃3b5998，並且當linkedin div顯示我希望背景顏色爲＃007bb5。

如果這是可能的，我真的很感激一隻手。謝謝！

來源

2016-02-13 Liam Rawsthorne

請向我們顯示您的代碼。例如： https://jsfiddle.net/ – Microsmsm

我們是程序員，我們可以閱讀代碼。這絕對有可能，可能是通過使用你的輪播回調，但你仍然需要向我們展示一些代碼。 – Shomz

請給你的旋轉木馬代碼片段。 –

這是非常形成的代碼，但它的工作原理。我不能假裝知道你的代碼是什麼樣子，所以我希望這會有所幫助：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <style> 
      html, body { 
       height: 100%; 
       padding: 0px; 
      } 
      #social-media-feeds { 
       display: inline-block; 
       height: 100%; 
       width: 100%; 
      } 
      .post { 
       display: none; 
      } 
      #leftButton { 
       position: absolute; 
       top: 50%; 
       left: 0%; 
       height: 30px; 
       width: 60px; 
       text-align: right; 
       background-color: gray; 
       cursor: pointer; 
      } 
      #rightButton { 
       position: absolute; 
       top: 50%; 
       right: 0%; 
       height: 30px; 
       width: 60px; 
       background-color: gray; 
       cursor: pointer; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="leftButton"><</div> 
     <div id="rightButton">></div> 
     <div id="social-media-feeds"> 
      <div id="facebook" class="post">Facebook</div> 
      <div id="twitter" class="post">Twitter</div> 
      <div id="linkedIn" class="post">LinkedIn</div> 
     </div> 
     <script> 
      var socialMediaFeedsDiv = document.getElementById('social-media-feeds'); 
      var backgroundColors = ["#3b5998", "#00aced", "#007bb5"]; 
      var posts = document.getElementsByClassName('post'); 
      var index = 0; 
      posts[index].style.display = 'inline-block'; 
      socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];  
      var leftButton = document.getElementById('leftButton'); 
      leftButton.addEventListener('click', function() { 
       posts[index].style.display = 'none'; 
       index--; 
       if (index < 0) { 
        index = posts.length - 1; 
       } 
       posts[index].style.display = 'inline-block'; 
       socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index]; 
      }); 
      var rightButton = document.getElementById('rightButton'); 
      rightButton.addEventListener('click', function() { 
       posts[index].style.display = 'none'; 
       index++; 
       if (index > (posts.length - 1)) { 
        index = 0; 
       } 
       posts[index].style.display = 'inline-block'; 
       socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index]; 
      }); 
     </script> 
    </body> 
</html>

來源

2016-02-13 02:38:48

當某個div顯示時更改div的背景顏色

回答

相關問題