Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dodanie klasy do diva
Forum PHP.pl > Forum > Po stronie przeglądarki
Fakebook
Witam

Mam problem, a mianowicie pracuję nad prostą stroną wizytówką, korzystam z twitterowego bootstrapa.

Header, w ktorym znajduje się menu, umieściłem w osobnym pliku header.php który jest indludowany do wszystkich pozostałych. Wszystko działa jak należy.

Problem pojawił się teraz, gdyż chcę aby po wybraniu jednej z podstron w menu, pojawiło się pod danym hrefem kolorowe tło (za pomocą klasy 'active' w css).

Kod bootstrapowego menu budowany jest na divach, i wygląda tak:


  1. <div class="col-sm-2">
  2. <a href="index.php" id="home"><?php echo $lang['MENU_HOME']; ?></a>
  3. </div>
  4. <div class="col-sm-2">
  5. <a href="about.php" id="about"><?php echo $lang['MENU_ABOUT']; ?></a>
  6. </div>
  7. <div class="col-sm-2">
  8. <a href="courses.php" id="courses"><?php echo $lang['MENU_COURSES']; ?></a>
  9. </div>
  10. <div class="col-sm-2">
  11. <a href="opinions.php" id="opinions"><?php echo $lang['MENU_OPINIONS']; ?></a>
  12. </div>
  13. <div class="col-sm-2">
  14. <a href="contact.php" id="contact"> <?php echo $lang['MENU_CONTACT']; ?> </a>
  15. </div>
  16. <div class="col-sm-2">


Potrzebuję zatem dodac klase "active" po kliknięciu na któryś z hrefów (<div class="col-sm-2 active">

Jak to mogę zrobić, biorąc pod uwagę że całe powyższe menu znajduje się w osobnym pliku header.php?
fate
CODE
$('.col-sm-2 a').click(function(){
$('.col-sm-2 a').removeClass("active");
$(this).addClass("active");
});
pitu
Sposób z posta wyżej zadziała jeżeli strona przy zmianie podstrony nie zostanie przeładowana. W innym przypadku sprawdzaj jaki plik jest aktywny i odpowiednio dodawaj klasę.
Fakebook
No właśnie w tym problem. Funkcja działa, ale jest klik, zmienia się kolor, jednak wywołuje to też załadowanie nowej strony, a przez to ponowne załadowanie header.php i po klasie 'active' nie ma już śladu

Pitu, czy mógłbyś proszę rozwinąć co miałes na myśli, najlepiej jakbys mial jakis przyklad:

"W innym przypadku sprawdzaj jaki plik jest aktywny i odpowiednio dodawaj klasę."?
johny_s
pobierasz adres strony i porównujesz z opcjami jakie masz w menu
vermis
Po co mieszać do tego JS. W header.php porównaj adres np. z $_SERVER["SCRIPT_NAME"] z tym co masz w poszczególnych pozycjach menu. Jak zawartość 'href' jest taka sama jak adres to dodajesz klasę 'active'.
Fakebook
Wielkie dzieki Panowie, problem rozwiązany.

  1. <div class="col-sm-2 <?php if ($page == "/sos/PHP/index.php") {echo " active";} ?>">


I zadziałało. Pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.