Bonjour,

Comment pourrais-je changer la couleur du background d'un élément dans la liste qui contient les noms des chansons quand je clique sur le bouton Next?
La liste est dans le code html. Merci infiniment pour tout aide.
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="working_files/styles.css" title="Default" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="working_files/custom.js"></script>
 
</head>
 
<body>
<div id="player">
  <a href="#" class="audio prev"><span>Prev</span></a>
 <audio controls></audio>
  <a href="#" class="audio next"><span>Next</span></a>
  <br><span class="audio name"></span>
</div>
 
<div id="list">
 
  <p><a href="#" class="audio play" data-frogsong-id="AmericanToad_Call"><span>1. American Toad Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="Bullfrog_Call"><span class="sound">2. Bullfrog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="CopesGrayTreefrog_Call"><span class="sound">3. Treefrog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="CricketFrog_Call"><span class="sound">4. Cricket Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="EasternGrayTreefrog_Call"><span class="sound">5. EasternGray Treefrog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="FowlersToad_Call"><span class="sound">6. Fowlers Toad Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="GreenFrog_Call"><span class="sound">7. Green Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="NorthernLeopardFrog_Call"><span class="sound">8. Northern Leopard Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="PickeralFrog_Call"><span class="sound">9. Pickeral Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="PlainsLeopardFrog_Call"><span class="sound">10. Plains Leopard Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="SpringPeeper_Call"><span class="sound">11. Spring Peeper Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="WesternChorusFrog_Call"><span class="sound">12. Western Chorus Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="WoodFrog_Call"><span class="sound">13. Wood Frog Call</span></a></p>
 
</div>
<script>
  
  $('span').on('click', function() {
  $('span').removeClass('active');
  $(this).addClass('active');
});
 
</script>
</body>
</html>
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
#player {
  text-align: center;
  background:#e6e6e6;
  border: 1px solid;
  width: 400px;
  padding:10px;
}
 
 
#player a {
 
  width: 100px;
  font-size: 14px;
 
  padding: 5px;
  border: #000 2px solid;
  background: #ddd;
  cursor: pointer;
  color: #000
 
}
 
 
#player span {
 
  margin-top: -10px;
}
 
 
audio {
  width: 300px;
  height: 55px;
 
}
 
#list {
  width: 422px;
  }
 
#list span {
color: #000000;
font-family: Verdana, Arial, Helvetica;
background: #c1c1c1;
display: block;
border: 1px solid;
padding:5px;
}
 
#list span.active {
  background: #736e69;
}
 
 
#list a:hover span {
  color: #fff;
  text-decoration:none;
}
 
div p {
  margin:0;
    }
 
div a {
  text-decoration:none;
  }

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
window.Formaweb = window.Formaweb || {};
 
window.Formaweb.Player = function() {
  'use strict';
 
  var audio;
  var playlist;
  var len;
  var current;
 
  init();
 
  function init(){
    current = 0;
    audio = $('audio')[0];
 
    playlist = [
      {name: '1. American Toad Call', path: 'frog_sounds/AmericanToad_Call.mp3', id: 'AmericanToad_Call'},
      {name: '2. Bullfrog Call', path: 'frog_sounds/Bullfrog_Call.mp3', id: 'Bullfrog_Call'},
      {name: '3. Treefrog Call', path: 'frog_sounds/CopesGrayTreefrog_Call.mp3', id: 'CopesGrayTreefrog_Call'},
      {name: '4. Cricket Frog Call', path: 'frog_sounds/CricketFrog_Call.mp3', id: 'CricketFrog_Call'},
      {name: '5. EasternGray Treefrog Call', path: 'frog_sounds/EasternGrayTreefrog_Call.mp3', id: 'EasternGrayTreefrog_Call'},
      {name: '6. Fowlers Toad Call', path: 'frog_sounds/FowlersToad_Call.mp3', id: 'FowlersToad_Call'},
      {name: '7. Green Frog Call', path: 'frog_sounds/GreenFrog_Call.mp3', id: 'GreenFrog_Call'},
      {name: '8. Northern Leopard Frog Call', path: 'frog_sounds/NorthernLeopardFrog_Call.mp3', id: 'NorthernLeopardFrog_Call'},
      {name: '9. Pickeral Frog Call', path: 'frog_sounds/PickeralFrog_Call.mp3', id: 'PickeralFrog_Call'},
      {name: '10. Plains Leopard Frog Call', path: 'frog_sounds/PlainsLeopardFrog_Call.mp3', id: 'PlainsLeopardFrog_Call'},
      {name: '11. Spring Peeper Call', path: 'frog_sounds/SpringPeeper_Call.mp3', id: 'SpringPeeper_Call'},
      {name: '12. Western Chorus Frog Call', path: 'frog_sounds/WesternChorusFrog_Call.mp3', id: 'WesternChorusFrog_Call'},
      {name: '13. Wood Frog Call', path: 'frog_sounds/WoodFrog_Call.mp3', id: 'WoodFrog_Call'},
    ];
 
    len = playlist.length - 1;
 
 
 
    audio.addEventListener('ended', function(e){
      next();
      run(playlist[current], audio);
 
    });
 
    $('.audio.next').on('click', function(){
 
 
      next();
 
      run(playlist[current], audio);
 
      return false;
       });
 
 
 
    $('.audio.prev').on('click', function(){
      prev();
      run(playlist[current], audio);
 
      return false;
    });
 
    $('.audio.play').on('click', function(){
      var frogsong_id = $(this).attr('data-frogsong-id');
 
      if(frogsong_id != undefined){
        playById(frogsong_id);
      }
 
      return false;
    });
  }
 
 
  function run(frogsong, player) {
 
    $('.audio.name').text(frogsong.name);
    player.src = frogsong.path;
 
    audio.load();
    audio.play();
 
 
  }
 
 
  function next(){
    current++;
    if(current > len) current = 0;
  }
 
  function prev(){
    current--;
    if(current < 0) current = 0;
  }
 
  function playById(id){
    var playlist_id = undefined;
 
    $.each(playlist, function(index, value){
      if(value.id == id){
        playlist_id = index;
      }
    });
 
    if(playlist_id != undefined){
      current = playlist_id;
      run(playlist[current], audio);
    }
  }
 
}
 
$(document).ready(function(){
 // audio.pause();
var player = window.Formaweb.Player(); 
 
});
Merci beaucoup pou votre aide.