Menu CSS - efekt po kliknięciu

Dla specjalistów Webmastering
#1
#2

musisz dorzucić:

background-color:red;

do #tab-container-1 .tab{

…

}

:slight_smile:

#3

Dzięki, ale nie oto mi chodziło, chciałem, żeby to kolor buttona pozostawał czerwony po kliknięciu, a nie cała karta, przepraszam za zamieszanie. A dokładniej, chodzi mi o efekt taki jak masz na stronce, po otwarciu kolor pozostaje czerwony.

#4

Pseudoklasa :active, proszę :slight_smile:

#5

Dzięki, ale z tego co wiem :active daje efekt po kliknięciu i przytrzymaniu , a ja chce, żeby efekt pozostawał na dłużej.

#6

http://jsbin.com/uyAQoFU/1/edit - przy przytrzymaniu działa hover :slight_smile:

#7

Niestety nie o to chodzi

– Dodane 02.11.2013 (So) 14:25 –

@REF

#8

Nadaj dla konkretnych li klasę np. “active”, czyli dla podstrony “O nas” do li z “O nas” dopisujesz class=“active”, a reszta li pozostaje bez zmian, bez dodanej klasy… analogicznie robisz na reszcie podstron, jesteś na “Zdjęcia”, to dla li “Zdjęcia” dodajesz dajesz klasę, a dla innych nie (zostają po staremu).

Teraz w css’ie definiujesz .active a {background-color: twój_kolor;} , czego końcowym wynikiem będzie zmiana koloru tła tylko dla linków w menu, które na danej podstronie rodzic posiada klasę “active”.

PS. Oczywiście nazwa klasy może być inna, “active” jest tylko przykładem i nie ma związku z :active podanym parę postów wyżej :wink:

#9

Dzięki, ale nie rozumiem, możesz podać cały kodzik? (CSS to dla mnie na razie nowość, jestem ledwo po kusie…)

#10

// klasa może się nazywać jak chcesz, ja zastosowałem się do przukładu użytk. manieKMP

CSS:

.active{

    background-color: red;

}
#11

Przejrzałem kod, który wstawiłeś w pierwszym poście i widzę, że nowej klasy nie potrzebujesz, bo już takowa istnieje, jest nią “numer” (odpadnie Tobie dopisek w css ;)).

A wiec, dla pliku (nazwy wymyślone, nie wiem jak je ponazywałeś):

  • Onas.html dopisujesz klasę dla odnośnika “O nas”

  • O nas

  • Oferta

  • Zdjęcia

[/code] - Oferta.html robisz to samo, tyle że dla linka “Oferta”


- 
- O nas
- Oferta
- Zdjęcia

- Zdjęcia.html masz już w podanym przez Ciebie kodzie (karta "Zdjęcia" jest czerwona) ale dla formalności

    

- 
- O nas
- Oferta
- Zdjęcia

Po tych zmianach w plikach, otwarcie każdego z nich podświetli konkretną kartę na czerwono.

#12

Sorki, źle wytłumaczyłem, to musi iść na aukcje, i to jest zrobione nie tak jak cała strona jak to napisać używając tylko tych dwóch plików?

#13

Jeśli możesz dodawać skrypty (przynajmniej tak z kodu wygląda, a ja w sumie nie wiem czy można w aukcyjnych szablonach) to można to w ten sposób zrobić:

  • do wszystkich linków dodajesz klasę, w moim wypadku jest to “lnk”

  • podlinkowujesz w head do biblioteki jq (w kodzie masz do yetii-min.js, robisz tak samo tyle że za źródło podajesz np. link: http://code.jquery.com/jquery-2.0.3.min.js)

  • następnie stosujesz poniższy skrypt

    $(".lnk").click(function (event) {

      $(".numer").removeClass("numer");

          $(this).addClass("numer");

   });

A tak wygląda efekt końcowy (poklikaj w tab’sy): http://jsfiddle.net/G2nVz/1/

Ogółem całość/skrypt ma za zadanie robić coś podobnego co opisałem poprzednio, dodaje/usuwa klasę “numer” z obiektów…

#14

Ok ładnie działa na podglądzie u CB, gdzie umieścić ten skrypt?

#15

Może być w head, oczywiście w odpowiednim tagu, jak ten od yetii na końcu html.

#16