[Résolu] Bouton activé par défaut

Question

Xemnas

8 Jun 2018 à 15:26

Bonjour,

Dans le cadre de ma formation, je dois actuellement développer un portefolio.
Ayant créer une section nommée compétences, j'ai crée alors différente liste basé sur les différents domaine dans lesquels j'ai des compétences.
Ces liste sont développées lorsque l'on clique sur le bouton correspondant au domaine, mon problème étant que lorsque je lance l'ouverture du portefolio, aucun bouton n'est activé et les listes ce succèdent l'une après l'autre jusqu'à ce que l'on clique enfin sur le bouton qui finira par trier et afficher que les éléments filtré par le code.
Pour éviter ce problème j'aimerais que le premier bouton du menu soit activé par défaut pour que la liste soit ainsi trié dès le départ.
N'ayant que très peu de connaissance dans le développement, je ne sais pas du tout vers ou orienter mes recherches, si le fait d'activer par défaut un bouton vient d'une balise html, ou du css voir même d'une partie java.
En espérant que mon sujet soit relativement clair, merci pour vos futur réponses.

_laurent

Modérateur

8 Jun 2018 à 15:30

Salut,

Ça peut être soit dans le CSS soit dans le JavaSCRIPT (ne pas oublier le "script" malheureux, Java c'est tout autre chose) selon comment c'est fait. Il nous faudrait pouvoir acceder à ton code (c'est indispensable quand tu poste sur un forum). Donc soit ton site est déjà en ligne et on peut aller voir directement, soit tu nous fait un exemple dans un jsfiddle ou codepen par exemple, soit tu copie le code ici dans des balise de code (attention pas tout le code de tout ton site non plus mais au moins toute la partie qui gère ça html + CSS + js).

bazooka07

8 Jun 2018 à 15:50

Il n'est pas nécessaire d'utiliser JS :


<!--
Mettre dans styles :
input[name="domaines"],
input[name="domaines"] + ul { display: none; }
input[name="domaines"]:checked + ul { display: inline-block; }
-->
<ul id="competences">
    <li>
        <label for="dom-1">Domaine n°1</label>
        <input id="dom-1" type="radio" name="domaines" checked />
        <ul>
            <li>Compétence 1</li>
            <li>Compétence 2</li>
            <li>Compétence 3</li>
        </ul>
    </li>           
    <li>
        <label for="dom-2">Domaine n°2</label>
        <input id="dom-2" type="radio" name="domaines" />
        <ul>
            <li>Compétence 1</li>
            <li>Compétence 2</li>
            <li>Compétence 3</li>
        </ul>
    </li>           
    <li>
        <label for="dom-3">Domaine n°3</label>
        <input id="dom-3" type="radio" name="domaines" />
        <ul>
            <li>Compétence 1</li>
            <li>Compétence 2</li>
            <li>Compétence 3</li>
        </ul>
    </li>           
</ul>

Modifié par bazooka07 (08 Jun 2018 - 15:51)

Xemnas

8 Jun 2018 à 15:59

Merci de vos deux réponses,

En premier lieu _Laurent voici les parties de mon code qui affecte ma partie compétences et celle qui sont donc liées à mon problème.

HTML :

<!-- Compétences -->
	<section id="skills">
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
					<h2 class="section-heading"> Mes compétences </h2>
				</div>
			</div>
			<div align="center">
				<button class="btn btn-default filter-button" data-filter="systeme" submit>Administration Système</button>
				<button class="btn btn-default filter-button" data-filter="reseau">Administration Réseaux</button>
				<button class="btn btn-default filter-button" data-filter="Bureautique">Bureautique</button>
				<button class="btn btn-default filter-button" data-filter="Langue">Langues</button>
			</div>
			<div class="container filter systeme">
				<div class="row_skills">
					<h3 style="text-align : center;">Administration Sytème</h3>
					<br>
					<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
								<span class="skill"> <strong>Windows Client</strong> (de XP à 10) </span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
								<span class="skill"> <strong> Windows Server </strong> (de SBS 2008 à 2016) </span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar">
							<div class="progress-bar progress-bar-success" role="progressebar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
								<span class="skill"> <strong> Ubuntu </strong> </span>
							</div>
						</div>
						<br>
					</div>

CSS:

.filter-button
{
    font-size: 18px;
    border: 2px solid transparent;
    border-radius: 5px;
    text-align: center;
    color: white;
    margin-bottom: 30px;
	background: rgba(128, 128, 128, 0.5);

}
.filter-button:hover
{
    font-size: 18px;
    border: 2px solid transparent;
    border-radius: 5px;
    text-align: center;
    color: white;
    background-color: rgba(148, 54, 52, 0.5);

}

.filter-button:focus
{
    font-size: 18px;
    border: 2px solid transparent;
    border-radius: 5px;
    text-align: center;
    color: white;
    background-color: rgba(148, 54, 52, 0.6);

}

JS:

$(document).ready(function(){

    $(".filter-button").click(function(){
        var value = $(this).attr('data-filter');
        
        if(value == "all")
        {
            //$('.filter').removeClass('hidden');
            $('.filter').show('1000');
        }
        else
        {
//            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
//            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
            $(".filter").not('.'+value).hide('3000');
            $('.filter').filter('.'+value).show('3000');
            
        }
    });
    
    if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");

});

En 2nd lieu merci bazooka, je ne savais pas que je pouvais éviter de passer par JS même si c'est déjà fait.
Modifié par Xemnas (08 Jun 2018 - 16:19)

JENCAL

8 Jun 2018 à 16:08

Tu as oublié ton premier lieu Smiley zzzz

Xemnas

8 Jun 2018 à 16:13

Ahah oui JENCAL,

On sent la personne habituée aux forums et qui a cliqué sur envoyé avant de terminer son message.

JENCAL

8 Jun 2018 à 16:20

Cela viendrait-il d'ailleurs ?
https://codepen.io/JUSEN/pen/ERNdmY
car chez moi, la première compétence est activé dès le début Smiley smile

Xemnas

8 Jun 2018 à 16:24

Non, je n'ai collé qu'une partie du code HTML, voilà pourquoi tu ne vois que la première activé, je poste le reste.

	<section id="skills">
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
					<h2 class="section-heading"> Mes compétences </h2>
				</div>
			</div>
			<div align="center">
				<button class="btn btn-default filter-button" data-filter="systeme" submit>Administration Système</button>
				<button class="btn btn-default filter-button" data-filter="reseau">Administration Réseaux</button>
				<button class="btn btn-default filter-button" data-filter="Bureautique">Bureautique</button>
				<button class="btn btn-default filter-button" data-filter="Langue">Langues</button>
			</div>
			<div class="container filter systeme">
				<div class="row_skills">
					<h3 style="text-align : center;">Administration Sytème</h3>
					<br>
					<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
								<span class="skill"> <strong>Windows Client</strong> (de XP à 10) </span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
								<span class="skill"> <strong> Windows Server </strong> (de SBS 2008 à 2016) </span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar">
							<div class="progress-bar progress-bar-success" role="progressebar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
								<span class="skill"> <strong> Ubuntu </strong> </span>
							</div>
						</div>
						<br>
					</div>
				
					<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
						<div class="progress skill-bar">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
								<span class="skill"> <strong>Debian</strong> </span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								<span class="skill"> <strong>CentOs</strong> </span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								<span class="skill"> <strong>Linux Server</strong> </span>
							</div>
						</div>
						<br>
					</div>
				</div>
			</div>
			<div class="container filter reseau">
				<div class="row_skills">
					<h3 style="text-align : center;">Administration réseaux</h3>
					<br>
					<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
								<span class="skill"> <strong>Virtualisation</strong> (Hyper-V et VMWare)</span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
								<span class="skill"> <strong>Supervision</strong> (Nagios et Centreon) </span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
								<span class="skill"> <strong>Masterisation</strong> </span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								<span class="skill"> <strong>WireShark</strong> </span>
							</div>
						</div>
						<br>
					</div>
					<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
								<span class="skill"> <strong>Maquettage</strong> (Packet Tracer et GNS3)</span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
								<span class="skill"> <strong>Commandes CISCO</strong> (Certification CCNA1 et CCNA2) </span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
								<span class="skill"> <strong>Powershell</strong> </span>
							</div>
						</div>
						<br>
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
								<span class="skill"> <strong>Shell Linux</strong> </span>
							</div>
						</div>
						<br>
					</div>
				</div>
			</div>
			<div class="container filter Bureautique">
				<div class="row_skills">
				<h3 style="text-align : center;">Bureautique / Design / Graphisme</h3>
				<br>
					<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
								<span class="skill"> <strong>Microsoft Office</strong> </span>
							</div>
						</div>
					</div>
					<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
						<div class="progress skill-bar ">	
							<div class="progress skill-bar ">
								<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
									<span class="skill"> <strong>Libre Office</strong> </span>
								</div>
							</div>
							<br>
						</div>
					</div>
				</div>
			</div>		
			<div class="container filter Langue">
				<div class="row_skills">
				<h3 style="text-align : center;">Langues</h3>
				<br>
					<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
						<div class="progress skill-bar ">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
								<span class="skill"> <strong>Anglais</strong> (Niveau B2 Validé, C1 en cours de validation) </span>
							</div>
						</div>
					</div>
				</div>	
				<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
					<div class="progress skill-bar ">
						<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
							<span class="skill"> <strong>Espagnol</strong> </span>
						</div>
					</div>
					<br>
				</div>
			</div>
		</div>
	</section>

En réutilisant le lien que tu m'a donné, on voit bien, que les listes ne sont pas caché tant que l'on ne clique pas sur l'un des boutons, voilà pourquoi j'aimerais "forcer" l'utilisation du premier bouton
Modifié par Xemnas (08 Jun 2018 - 16:26)

JENCAL

8 Jun 2018 à 16:54

J'ai tout rajouté..

J'ai toujours Administration Sytème de visible en premier
https://codepen.io/JUSEN/pen/ERNdmY

Xemnas

8 Jun 2018 à 16:56

En cliquant sur ton lien, j'ai également Administration Système visible en premier, mais je vois également les autres compétences listée en dessous, alors que j'aimerais qu'elle soit cachées

JENCAL

8 Jun 2018 à 17:21

Il faudrait que tu regroupe tes div filter dans une seul div contenaire, comme ça tu peux faire une

.contenaire:not(:first-child){
 display:none;
}

Xemnas

8 Jun 2018 à 17:55

Merci beaucoup JENCAL,
Grace à ton conseil j'ai pu régler mon problème! Merci!

Sujet clos

Questions générales et questions de débutants

[Résolu] Bouton activé par défaut