Changement contenu div au clic d'un menu

1 pièce(s) jointe(s)

Bonjour à tous,

Alors voila : je développe un site actuellement dans le cadre d'un stage que j'effectue et je souhaite, dans une page, avoir un menu (différents types de musiques) et quand je clic sur un, avoir les lecteurs des musiques qui correspondent bien.
On m'a parlé de la fonction innerHTML mais je n'y connais pas grand chose en JavaScript... Si vous pouvez m'aider je vous serez vraiment reconnaissant !

Je vous montre le résultat que j'aimerai :

Pièce jointe 173494

Et voila le code :

Code:

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
<section id="slide-3" class="homeSlide">
	<div class="bcg">
	<div class="hsContainer">
		<div class="hsContent">
		    	<div class="titreslide3"><h1>MUSIC</h1></div>
		    		<div class='menumusic'>
					<ul>
						<li class='active'><a href='#'><span>Country</span></a></li>
						<li><a href='#'><span>Deep</span></a></li>
						<li><a href='#'><span>Techno</span></a></li>
						<li class='last'><a href='#'><span>Electro</span></a></li>
					</ul>
				</div>
			        <div class="clear"></div>
		                <div class="musique">
			        <div class="ligne1">
					<iframe width="30%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?       url=https%3A//api.soundcloud.com/tracks/194708475&amp;auto_play=false&amp;hide_related=false&amp;show_comments=false&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                                        <iframe width="30%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/194708475&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
                                        <iframe width="30%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/194708475&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
				</div>
                                <div class="ligne2">
					<iframe width="30%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/194708475&amp;auto_play=false&amp;hide_related=false&amp;show_comments=false&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                                        <iframe width="30%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/194708475&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
                                        <iframe width="30%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/194708475&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
				</div>
			</div>
		    </div>
		</div>
	</div>  	
	</div>
</section>

Code:

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
.titreslide3{
    margin-top: 5%;
    font-family: caviar_dreamsregular;
    font-size: 2vw;
    margin-left: 62%;
    letter-spacing: 1.2em;
}
.sectiontitremusic{
    width: 50%;
    float: right;
}
.menumusic{
    text-align: center;
    margin-top: 2%;
    margin-right: 15%;
    width: 26%;
    float: right;
} 
.menumusic ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: auto;
    position: relative;
    display: block;
    font-size: 1vw;
    background: none;
    font-family: caviar_dreamsregular;
    zoom: 1;
}
.menumusic ul:before {
    content: '';
    display: block;
}
.menumusic ul:after {
    content: '';
    display: table;
    clear: both;
}
.menumusic li {
    display: block;
    float: right;
    padding: 0 4px;
}
.menumusic li a {
    display: block;
    float: right;
    color: black;
    text-decoration: none;
    padding: 10px 20px 7px 20px;
    border-bottom: 3px solid transparent;
}
.menumusic li a:hover {
    color: black;
    border-bottom: 3px solid black;
}
.menumusic li.active a {
    display: inline;
    border-bottom: 3px solid black;
    float: right;
    margin: 0;
}
.musique{
    width: 60%;
    float: right;
}
.ligne1{
    margin-top: 8%;
}
.ligne2{
    margin-top: 6%;
}
.ligne1 iframe:nth-child(2), .ligne2 iframe:nth-child(2){
    margin-left: 2.5%;
    margin-right: 2.5%;
}

Bonjour,

Si ta question est de savoir comment modifier le contenu d'une div tu as plusieurs méthodes par exemple en JQuery : append (ajoute du contenu à la fin de la div), prepend (au début), innerHtml ou html() en Jquery qui remplace le contenu de la div. Tout dépend de ou tu veux et comment ut veux placer ton lecteur .

Alors en fait l'image que je vous ai mise c'est ce qui s'affichera a chaque fois. Seuls les musiques changeront. Du coup, a chaque clic sur une catégorie, les musiques changeront.

Bonjour,

Citation:

(...)quand je clic sur un, avoir les lecteurs des musiques qui correspondent bien.

il te faut modifier les src de tes IFRAMEs.

Comment ca les modifier ? J'ai les musiques qu'il me faut avec.

Je n'avais pas compris que tu les chargeais tout au départ dans tes IFRAMEs.
Je pense donc qu'il faut que tu affiches/masques les IFRAMEs suivant le choix de ton menu.