前段实现可点击切换音乐的播放列表，包括css部分

HTML部分：

<div class="playlist">
  <h2>播放列表</h2>
  <ul>
    <li class="active">歌曲1</li>
    <li>歌曲2</li>
    <li>歌曲3</li>
    <li>歌曲4</li>
  </ul>
</div>

CSS部分：

.playlist {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
}

.playlist h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.playlist ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.playlist li {
  padding: 10px;
  cursor: pointer;
}

.playlist li.active {
  background-color: #333;
  color: #fff;
}

JavaScript部分（使用jQuery库）：

$('.playlist li').click(function() {
  $('.playlist li').removeClass('active');
  $(this).addClass('active');
  // 切换音乐播放
});

相关问题

点击图片播放暂停音乐css+js

好的，你可以按照以下步骤实现点击图片播放暂停音乐的效果：

1. 准备一个音频文件和一个图片文件，并将它们放在你的项目中。

2. 在 HTML 中添加一个 `<audio>` 元素和一个 `<img>` 元素，分别用于显示图片和播放音频。

<img src="your-image-file.jpg" id="audio-img" onclick="toggleAudio()">
<audio id="audio-player" src="your-audio-file.mp3"></audio>

3. 在 CSS 中设置图片的样式，例如大小和位置。

#audio-img {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

4. 在 JavaScript 中实现点击图片播放暂停音乐的功能，可以使用 `play()` 和 `pause()` 方法来控制音频的播放和暂停。

var audioPlayer = document.getElementById("audio-player");
var audioImg = document.getElementById("audio-img");

function toggleAudio() {
  if (audioPlayer.paused) {
    audioPlayer.play();
    audioImg.src = "pause-image-file.jpg"; // 切换为暂停图标
  } else {
    audioPlayer.pause();
    audioImg.src = "play-image-file.jpg"; // 切换为播放图标
  }
}

这样，当你点击图片时，就可以播放或暂停音频了。当音频开始播放时，图片会切换为暂停图标；当音频暂停时，图片会切换为播放图标。当然，你需要根据自己的实际情况来修改代码中的文件名和样式。

html + css 实现一排按钮，点击切换按钮样式

好的，可以使用以下的 HTML 和 CSS 代码来实现一排按钮，并且点击按钮可以切换按钮的样式：

HTML代码：

<div class="buttons">
  <button class="active">Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

CSS代码：

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin: 0 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  background-color: #ccc;
  color: #fff;
  cursor: pointer;
}

button.active {
  background-color: #f00;
}

在这段代码中，我们使用了 flexbox 布局来使这些按钮水平居中，同时使用了 margin 和 padding 来设置按钮的间距和内边距，使用了 border-radius 来设置按钮的圆角，使用了 background-color 和 color 来设置按钮的背景色和字体颜色，使用了 cursor: pointer 来设置鼠标悬停时的鼠标样式。

同时，我们使用了一个 active 的类来设置当前选中的按钮的样式，当这个类被添加到某个按钮上时，这个按钮的背景色会变成红色。我们可以使用 JavaScript 来实现点击按钮后添加或移除这个类。