Powiązanie klas

Question

Cześć,

Mam mały problem i potrzebuje pomocy. Mianowicie:

W pierwszej kolumnie mam <li> i klasy:

<li class="abc1">
...
</li>
<li class="abc2">
...
</li>
<li class="abc3">
...
</li>
<li class="abc4">
...
</li>

...

Po najechaniu na li pojawia się:

<li class="abc1 focus">

 

a po kliknięciu:

<li class="abc1 active">

 

w drugiej kolumnie:

<div class="box nazwa1">
...
</div>
<div class="box nazwa2">
...
</div>
<div class="box nazwa3">
...
</div>
<div class="box nazwa2">
...
</div>

...

Jak przypisać "abc1" do np. "nazwa1" lub "nazwa3"

Przykład:

Najeżdżam na "abc1" i dodaje mi klasę do "nazwa3" np. "hover-box"
Klikam na "abc1" i dodaje mi klasę do "nazwa3" np. "active-box"

 

Jak to ze sobą powiązać, chodzi mi tylko o prosty przykład.

Answer 1

jesli chcesz zrobić to: Najeżdżam na "abc1" i dodaje mi klasę do "nazwa3" np. "hover-box"  w jquery
 

$(".abc1").on("mouseenter",function(){

              $(".nazwa3").addClass("hover-box");

});

Czyli bierzesz element jquery o classie abc1 nasłuchujesz znarzenia mouseenter i gdy ono zajdzie wykonujesz funkcje ktora dla elementu jquery o classie nazwa3 wywoluje funkcje addClass() ktora nadaje temu elementowi classe hover-box

Comments

Z tym że nie wiem czy chcesz w js czy w jquery

---

Działa, tylko jak teraz zrobić, żeby klasa hover-box znikała, bo niestety jest widoczna cały czas.

---

Masz funkcje removeClass() do usuwania klasy, ale możesz też uzyc funkcji toggleClass() ktora działa w ten sposob że gdy element nie ma podanej klasy to zostanie ona dodana a gdy już ją ma to zostanie usunięta