GoldenLine
Zaloguj się
Ernest Syska

Ernest Syska Przedsiębiorca

Temat: dodanie atrybutu class="active" dla <li>

Cześć.

Jako że 2 godziny na necie poświęcone na wyszukanie rozwiązania tego zdawałoby się trywialnego problemu nie dają rezultatu, to znowu ostatnią deską ratunku jesteście Wy :)

mamy taki kodzik html:

<ul id="my">
<li ><a href="#" ><span>Profil</span></a></li>
<li ><a href="#" ><span>Grupy</span></a></li>
<li ><a href="#"><span>Poczta</span></a></li>
<li ><a href="#"><span>Znajomi</span></a></li>

</ul>

Jak zrobić aby po kliknięciu w danego <li> dodała się tam klasa: class="active" ?

Pozdrawiam i z góry dziękuje za pomoc

Ernest
Link do wypowiedziLink

konto usunięte

Temat: dodanie atrybutu class="active" dla <li>

wziąć childy elementu i id = my, kazdemu childowi dodac eventa onclick i w tym evencie addclass? plus ewentualnie najpierw usuniacie klasy ze wszystkich pozostalych zeby tylko jeden sie podswietlal. zalezy jaiej biblioteki js uzywasz no chyba ze drepczesz na piechote
Link do wypowiedziLink
Ernest Syska

Ernest Syska Przedsiębiorca

Temat: dodanie atrybutu class="active" dla <li>

No właśnie takie rzeczy widziałem w necie, ale nie chciały mi biegać. Testowałem kilka.

Używam JQuery, i oczywiscie mozemy coś w tym pobudować. Ale wydawało mi się to na tyle proste ze moznaby pojść na piechotę. Kolejny raz okazuje się że trzeba coś iterować zmieniać itd.

Zatem, jeśli nie stanowi Ci to wielkiego wysiłku, proszę o jakiś przykład... Dalej podchwycę i wytestuje.

pozdrawiam,
ES
Link do wypowiedziLink

konto usunięte

Temat: dodanie atrybutu class="active" dla <li>



<li onclick="this.className='active'">aaa</li>
Link do wypowiedziLink
Ernest Syska

Ernest Syska Przedsiębiorca

Temat: dodanie atrybutu class="active" dla <li>

A nie brakuje jakiejś funkcji w <script></script> Samo wstawienie tego w li nie działa...

ES

PS. JQuery jest zaciągniety.
Link do wypowiedziLink

konto usunięte

Temat: dodanie atrybutu class="active" dla <li>

JQuery nie ma nic do tego, sprawdź sobie czy to działa:

<ul>

  <li onclick="this.className='active'">aaa</li>

</ul>

<style>

li.active { background: red !important; }

</style>


Wydaje mi się że poprostu masz coś z CSS-em.
Link do wypowiedziLink

konto usunięte

Temat: dodanie atrybutu class="active" dla <li>



$('ul#my li').click(function(event) {

  $(this).parents('ul#my').find('li').removeClass('active');

  $(this).addClass('active');

  return false;

});
Link do wypowiedziLink
Ernest Syska

Ernest Syska Przedsiębiorca

Temat: dodanie atrybutu class="active" dla <li>

Style mam na pewno gotowe na obsluge active poniewaz gdy sobie wpisuje na twardo class="active" w htmlu to wszystko gra.

Teraz jest stan taki:



<script>



$('ul#my li').click(function(event) {



  $(this).parents('ul#my').find('li').removeClass('active');



  $(this).addClass('active');



  return false;



});







				</script>					<div class="moduleaccount">						<ul id="my">

				<li ><a href="http://localhost/new2/pl/jomsocial/profile?userid=<? echo $mojeid;?>"  ><span>Profil</span></a></li>

				<li  ><a href="http://localhost/new2/pl/jomsocial/groups" ><span>Grupy</span></a></li>

				<li ><a href="http://localhost/new2/pl/jomsocial/inbox"><span>Poczta</span></a></li>

				<li ><a href="http://localhost/new2/pl/jomsocial/friends?userid=<? echo $mojeid;?>"><span>Znajomi</span></a></li>

							</ul>


I niestety nie chce hulać.

?

ESErnest Syska edytował(a) ten post dnia 03.08.09 o godzinie 11:47
Link do wypowiedziLink

konto usunięte

Temat: dodanie atrybutu class="active" dla <li>

<script type="text/javascript">

$(document).ready(function(){

$('ul#my li').click(function(event) {



  $(this).parents('ul#my').find('li').removeClass('active');



  $(this).addClass('active');



  return false;



});

 });

</script>
Marcin Baran edytował(a) ten post dnia 03.08.09 o godzinie 11:49
Link do wypowiedziLink
Ernest Syska

Ernest Syska Przedsiębiorca

Temat: dodanie atrybutu class="active" dla <li>

Pieknie, klasy się dodają :) Tylko zablokowały mi się a - i linki nie działają. Śmiesznie ale coś je zatrzymało...

Jakieś pomysły?

ES
Link do wypowiedziLink

konto usunięte

Temat: dodanie atrybutu class="active" dla <li>

return false zatrzymal clicka.
Ale dlaczego chcesz, aby li bylo active, skoro ma dzialac <a> i zabierac nas z tego miejsca?
Link do wypowiedziLink
Ernest Syska

Ernest Syska Przedsiębiorca

Temat: dodanie atrybutu class="active" dla <li>

Czy ja tego chce? Niekoniecznie :)

To jest menu. Chodzi tylko o to aby gdy ktoś je kliknie (pozycję li) to wszedl na odpowiednią stronę (na którą wskazuje link) a zakładeczka menu była active. Zwyczajna rzecz, którą normalnie mi robi joomla ale postanowiłem sobie napisać swój kawałek (poza strukturą cms) i nie wykorzystuje gotowca joomli.

Zatem:
Pozycja menu (li)
Klik i skok do linka
Pozycja li jest active i css ją wyróżnia
---
Nowy klik i nowy skok do linka
Nowa pozycja się wyróżnia, poprzednia gaśnie.

Zatem co robić? wyłączyć false?

ES
Link do wypowiedziLink
Kamil Kłosowski

Kamil Kłosowski webdeveloper
limegarden.pl

Temat: dodanie atrybutu class="active" dla <li>

w tym momencie strona się przeładuje i zniknie active na wybranym linku. może zatem strony includuj za pomocą php lub jquery? a menu byłoby wtedy statyczne.
Link do wypowiedziLink
Ernest Syska

Ernest Syska Przedsiębiorca

Temat: dodanie atrybutu class="active" dla <li>

To że znika to niestety widzę. Jakoś nie chce mi się wierzyć że nie ma prostych rozwiązań. Nie chcę includować całych php bo linkiem przekazuje parametry. Z kolei jquery nie robiłem tego jeszcze i nie wiem jak.

Nie da się tych linków jakoś przemycić?

ES
Link do wypowiedziLink
Kamil Kłosowski

Kamil Kłosowski webdeveloper
limegarden.pl

Temat: dodanie atrybutu class="active" dla <li>

Albo parametr (get),albo interakcja z serwerem. Po stronie klienta nie da się tego inaczej rozwiązać.

A bez php -
http://www.johannburkard.de/blog/programming/javascrip...Kamil Kłosowski edytował(a) ten post dnia 03.08.09 o godzinie 12:59
Link do wypowiedziLink

konto usunięte

Temat: dodanie atrybutu class="active" dla <li>

oprocz przekazania czegos w url, mozesz jeszcze wykorzystac ciasteczka (zapisac tam aktywna pozycje i sprawdzac po zaladowaniu). jednak imo jest to przekombinowane.
to aplikacja powinna kontrolowac co jest active i podswietlac konkretny element.

PS no chyba, ze dana strona i jej podstrony bylyby odpalane ajaxem, ale nie o to pytales.
Link do wypowiedziLink
Ernest Syska

Ernest Syska Przedsiębiorca

Temat: dodanie atrybutu class="active" dla <li>

Wypróbujemy kolejną czarną skrzyneczkę, czyli dodatek pod jquery. Fajne to ale po pewnym czasie cały mój system bęzdie pobierał tony bibliotek zeby łaskawie dał się kliknąć w menu, zweryfikować forma itym podobne. Ech...
Link do wypowiedziLink

konto usunięte

Temat: dodanie atrybutu class="active" dla <li>

Ernest Syska:
Wypróbujemy kolejną czarną skrzyneczkę, czyli dodatek pod jquery. Fajne to ale po pewnym czasie cały mój system bęzdie pobierał tony bibliotek zeby łaskawie dał się kliknąć w menu, zweryfikować forma itym podobne. Ech...

wlasnie dlatego nie nalezy uzywac javascriptu tam gdzie mozna wykorzystac aplikacje ;)
Link do wypowiedziLink
Marcin Ważny

Marcin Ważny Student, Wyższa
Szkoła Informatyki i
Zarządzania w
Rzeszowie

Temat: dodanie atrybutu class="active" dla <li>

Witam

W sumie dziwny wątek, bo na początku napisałeś tylko tyle, że ma być onclick i ma dodac się class="active" i to jest banalne. Dopiero potem dodałeś, o co dokładnie chodzi. Wyjścia są dwa i nie ma co kombinować, albo AJAX i wtedy JS załatwia obsługę zakładek, albo mechanizm po stronie serwera, ciasteczka też w sumie, ale ja wiem, czy to dobre rozwiązanie?

Pozdrawiam
MarcinMarcin Ważny edytował(a) ten post dnia 21.08.09 o godzinie 23:53
Link do wypowiedziLink

konto usunięte

Temat: dodanie atrybutu class="active" dla <li>

Kamil Rudnik:
Ernest Syska:
Wypróbujemy kolejną czarną skrzyneczkę, czyli dodatek pod jquery. Fajne to ale po pewnym czasie cały mój system bęzdie pobierał tony bibliotek zeby łaskawie dał się kliknąć w menu, zweryfikować forma itym podobne. Ech...

wlasnie dlatego nie nalezy uzywac javascriptu tam gdzie mozna wykorzystac aplikacje ;)
przy weryfikacji wprowadzanych danych należy wykorzystać język serwera. dużym plusem jest także wykorzystanie javascritu, który wspomoże działanie. także nie zgadzam się do końca z powżyszym stwierdzeniem ;)

jeśli chodzi o prawidłowe programowanie, najpierw należałoby stworzyć stronę po stronie serwera, tak by pięknie hulała na każdym systemie i przy każdych ustawieniach. następnie, w miarę możliwości, umiejętności i zasad usability dodać skrypty javascript w celu ułatwienia życia użytkownikowi.

w praktyce wygląda to inaczej, jednak zawsze powinno być zapewnione wsparcie dla przeglądarek bez javascriptu.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

jQuery iframe form dodanie ...




Wyślij zaproszenie do
Anuluj