Jak jest widoczny div to podświetl podane litery.

Question

Cześć, chce zrobić coś takiego, że gdy div jest pokazany czyli display:block to wtedy podświetl litery.

Tak wygląda stronka normalnie

a gdy ktoś kliknie Treningi w menu to pokazuje się div, wszystko działa, ale chcę zrobić że gdy jest pokazany ten div to zeby w menu litery 'treningi' się podświetliły,a gdy nie jest pokazany to oczywiście mają mieć swój naturalny wygląd. Czy ktoś wie jak to łatwo wykonac?

Comments

Dodawaj class np active. A w CSS daj color dla textu.

Answer 1

1. Zdefiniuj sobie klasę CSS, a w niej to, jak ma wyglądać aktywny przycisk. Nazwij ją jakoś, zwyczajowo .active
2. Podepnij listener do rodzica przycisków - żeby nie podpinać do każdego z osobna i nie zapomnij odpowiednio wydelegować zdarzeń kliknięcia. (link do przyjemnego tutoriala)
3. Musisz napisać funkcję, która:
   • Usunie klasę .active z elementu, który ją posiada
   • Doda klasę .active do klikniętego elementu.

To tyle, mam nadzieję, że pomogłam

Comments

Zrobilem takie cos

<script>
var kolorek = document.getElementById('open-training').addEventListener('click', changecolor);
    function changecolor(){
        alert('wojtek');
    }
</script>

dziala,

ale jak chce np zrobic cos takiego '

<script>
var kolorek = document.getElementById('open-training').addEventListener('click', changecolor);
    function changecolor(){
        kolorek.style.color='red';
    }
</script>

to juz nie dziala 

---

i nie rozumiem tego "

• Usunie klasę .active z elementu, który ją posiada"

po co mam usuwac klase .active gdy div jest pokazany

Answer 2

Jak masz piktogram "Treningi" to dla jego id (lub klasy - zależy, czego użyłeś) musisz utworzyć reakcję na najechanie myszą. np.

<div id = "treningi"></div>

a w CSS:

domyślne:

#treningi
{
    background-image: url("treningi.png");
}

#treningi:hover //ważne - bez spacji
{
    background-image: url("treningi_blue.png");
}

:hover określa wygląd po najechaniu myszą, jak zjedziesz kursorem na bok, to wróci domyślna grafika. Są to tzw. pseudoklasy, więcej tu możesz stosować wiele świetnie wyglądających stylów, np. zmiana koloru czy rozmiaru.

Comments

wiem o tym, hovera używam bardzo często, i nie o to mi chodziło :)