Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML][JavaScript]Dynamiczne zakładki
Forum PHP.pl > Forum > Przedszkole
pabloemax
Witam, mam sobie kod
Kod
<html>
<head>
<script type="text/javascript">
// <![CDATA[
function pokaz_ukryj(pokaz, ukryj) {
    document.getElementById(pokaz).style.display = "block";
    document.getElementById(ukryj).style.display = "none";
}
//]]
</script>
</head>
<body>
<p>
    <a href="java script:void(pokaz_ukryj('tabela1', 'tabela2'))">Poka? 1</a>: ||
    <a href="java script:void(pokaz_ukryj('tabela2', 'tabela1'))">Poka? 2</a>:
</p>
<table id="tabela1" style="background: red; width: 200px;">
    <tr>
       <td>To jest pierwsza tabela</td>
    </tr>
</table>
<table id="tabela2"style="background: green; width: 200px; display:none">
    <tr>
        <td>To jest druga tabela</td>
    </tr>
</table>
</body>
</html>


Szukałem i czytałem trochę ale kurcze, ja niechciałbym rezygnować z tego kodu bo działa dobrze i jest mało skomplikowany. Więc moje pytanie brzmi w jaki sposób mogę zrobić tak aby aktualnie otwarta zakładka była podświetlona?

Dokładniej chodzi mi o to że zakładki są dwie każda z nich ma dwa pliki graficzne (zakladka1_aktywna.jpg, zakladka1_nieaktywna.jpg) i analogicznie do zakładki 2, pytanie teraz bardzo dużo znalazłem o tłach pod zakładkami ale żaden skrypt chyba że kiepsko szukałem nie daje możliwości takiej zmiany?. Proszę o ewentualnie nakierowanie mnie, żebym mógł to w jakiś sposób zrozumieć bo na mój rozum to będą klasy w css i kilka linijek kodu który przekaże aktywną klasę o id=zakladka1 i pobierze odpowiedni css wyświetlając go tak jak chcę. Dziękuję
Michasko
Utwórz dwie klasy CSS - dla niepodświetlonej zakładki ('zakladka') i dla podświetlonej ('aktywna').
Następnie używając JS reaguj na kliknięcie na daną zakładkę, tj. usuwaj wszystkim zakładkom klasę 'aktywna', a tej klikniętej - nadaj tę klasę.

Przy użyciu jQuery:
[JAVASCRIPT] pobierz, plaintext
  1. $(function() {
  2. $('.zakladka').click(function() {
  3. $('.zakladka').removeClass('aktywna');
  4. $(this).addClass('aktywna');
  5. });
  6. });
[JAVASCRIPT] pobierz, plaintext


Oczywiście w takim przypadku każda zakładka musi mieć dodany atrybut class="zakladka".
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.