web-dev-qa-db-fra.com

Vérifier si l'élément a la classe active, si oui ajouter la classe à un autre élément

Construire un site web pour un client, mais uniquement pour la page principale, il me faut un cours sur la div principale aux fins de CSS. Pour cela, j'essaie de rechercher une classe active dans un élément de menu pour la maison et si elle a la classe active, ajoutez une autre classe à la div de la page Web principale.

jusqu'à présent, je ne peux pas aller beaucoup plus loin que ceci:

<script>
$(document).ready(function() { 
if $('li.level1.item101').hasClass('active');
$('#main').addClass('woodwork');}
});
</script>

le html impliqué pour cela (l'élément li) ressemble à ceci lorsqu'il est actif avec la div quelque part en bas dans la page elle-même

<li class="level1 item101 active current"> </li>
<li class="level1 item102"> </li>
<div id="main"> </div>

mon code actuel ne semble pas être capable de saisir le li actif ou le div, toute aide serait grandement appréciée

javascriptjqueryhtmlcss
7
Jasper Doornbos

Tout d’abord, vous avez des erreurs avec votre code, le code HTML devrait être:

<li class="level1 item101 active current"> active</li>
<li class="level1 item102"> second</li>
<div id="main"> main </div>

et le javascript:

$(document).ready(function(){
  if ( $('li.level1.item101').hasClass('active') ) {
    $('#main').addClass('woodwork');
  }
});

Voici un travail violon

11
Razvan Balosin

Si c'est votre HTML

<ul>
    <li class="level1 item101 active current"> </li>
    <li class="level1 item102"> </li>
</ul>
<div id="main"> </div>

Le JavaScript devrait ressembler à ceci

$(document).ready(function(){
    if ($('li.item101').hasClass('active'))
        $('#main').addClass('woodwork');
});

Ici, je regarde juste si le Listelement avec la classe item101 a la classe active, si c'est le cas, alors je donne à la div-Tag avec l'ID main la classe woodwork

0
user3631948