当我在幻灯片中按下div时，如何更改另一个div的内容？

Question

我有幻灯片，我希望背景div改变背景图像和文字。我不知道如何完成这个。你有提示吗？我把目前为止的内容上传到了jsfiddle。背景div在代码中最远。

我搜索了很多“点击替换div内容”，但我似乎无法实现任何东西，需要帮助。

[type=radio] {
  display: none;
}

#slider {
  left: 0px;
  top: 200px;
  color: white;
  height: 200px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  right: 30%;
}

.slidercontainer {
  position: absolute;
  padding-top: 100px;
}

#slider label {
  margin: auto;
  width: 13%;
  height: 63%;
  border-radius: 4px;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}

#s1:checked~#slide4,
#s2:checked~#slide5,
#s3:checked~#slide1,
#s4:checked~#slide2,
#s5:checked~#slide3 {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
  transform: translate3d(-30%, 0, -200px);
}

#s1:checked~#slide5,
#s2:checked~#slide1,
#s3:checked~#slide2,
#s4:checked~#slide3,
#s5:checked~#slide4 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
  transform: translate3d(-15%, 0, -100px);
}

#s1:checked~#slide1,
#s2:checked~#slide2,
#s3:checked~#slide3,
#s4:checked~#slide4,
#s5:checked~#slide5 {
  box-shadow: 0 13px 25px 0 rgba(0, 0, 0, .3), 0 11px 7px 0 rgba(0, 0, 0, .19);
  transform: translate3d(0, 0, 0);
}

#s1:checked~#slide2,
#s2:checked~#slide3,
#s3:checked~#slide4,
#s4:checked~#slide5,
#s5:checked~#slide1 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
  transform: translate3d(15%, 0, -100px);
}

#s1:checked~#slide3,
#s2:checked~#slide4,
#s3:checked~#slide5,
#s4:checked~#slide1,
#s5:checked~#slide2 {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
  transform: translate3d(30%, 0, -200px);
}

#slide1 {
  background: #00BCD4
}

#slide2 {
  background: #4CAF50
}

#slide3 {
  background: #CDDC39
}

#slide4 {
  background: #FFC107
}

#slide5 {
  background: #FF5722
}


/*background div*/

.backgroundmusic {
  position: absolute;
  background-color: crimson;
  opacity: 0.7;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="backgroundmusic"></div>
<section id="slider">
  <input type="radio" name="slider" id="s1">
  <input type="radio" name="slider" id="s2">
  <input type="radio" name="slider" id="s3" checked>
  <input type="radio" name="slider" id="s4">
  <input type="radio" name="slider" id="s5">
  <label for="s1" id="slide1">
    <div class="vinylplay">
	    <a id="play-video" class="video-play-button" href="#">
        <span></span>
      </a>
      <div id="video-overlay" class="video-overlay">
        <a class="video-overlay-close">&times;</a>
      </div>
    </div>
    <img src="images/Ambient/maxresdefault.jpg" width="100%" height="100%" alt=""/>
  </label>
  <label for="s2" id="slide2">
    <div class="vinylplay">Play</div>
    <img src="images/Ambient/maxresdefault.jpg" width="100%" height="100%" alt=""/> 
  </label>
  <label for="s3" id="slide3">
    <img src="images/Ambient/hiroshiyoshimurawetlands.jpg" width="100%" height="100%" alt=""/>
  </label>
  <label for="s4" id="slide4">
    <img src="images/Ambient/maxresdefault.jpg" width="100%" height="100%" alt=""/>
  </label>
  <label for="s5" id="slide5">
    <img src="images/Ambient/pierloft.jpg" width="100%" height="100%" alt=""/>
  </label>
</section>

http://jsfiddle.net/5qcy9rvm/1/

Answer 1

http://jsfiddle.net/qv5e3znf/

$('#slider').click(function() {
    $('.backgroundmusic').css('background','blue');
})

使用jQuery设置'click'回调，并使用jQuery更改所需元素的css背景。如果需要，可以使用$(selector).text()更改文本内容。