Discussion :

[ParisElliot]

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 :



Et voila le code :

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
<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 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
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%;
}