Forum PHP.pl > [css] zakładki

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [css] zakładki

Forum PHP.pl > Forum > Przedszkole

gosienkami

3.04.2009, 14:52:59

hej
jak zrobić takie zakładki jak na onecie: dziś |polecamy|nareszczeie weekend

piotrooo89

3.04.2009, 14:55:47

coś rodzimego:
mintAJAX::Tabs
lub:
jQuery::Tabs

pi_wo

3.04.2009, 15:07:21

przy mniejszych stronach nie potrzeba AJAX'a, poczytaj o CSS-owym atrybucie display:

piotrooo89

3.04.2009, 15:13:07

Cytat

przy mniejszych stronach nie potrzeba AJAX'a, poczytaj o CSS-owym atrybucie display:

pokaż mi miejsce w którym powiedziałem że potrzeba AJAX'a? w CSS nie zrobisz wszystkiego tak dopieszczonego jak w JS.

K4mil94

3.04.2009, 15:18:18

Takie pytanie. Skoro takie można zrobić w CSS to jak ?

pi_wo

3.04.2009, 15:29:48

[HTML] pobierz, plaintext 
var from = "id pierwszej otwieranej zakładki";
 
function switchPanel(to)
{
document.getElementById(to).style.display='block';
document.getElementById(from).style.display='none';
from = to;
}
[HTML] pobierz, plaintext

Powinno działać, pisałem "od ręki". Nie widzę potrzeby ładowania dużej biblioteki jeżeli można to rozwiązać w ten sposób, chyba że chcesz ładować dynamicznie ich zawartość. Jest to JavaScript, ale de facto operujesz na stylu css...

EDIT: oczywiscie parametr display nie przyjmuje wartosci 'hidden' tylko 'none'. Przepraszam za pomylke, wynik pewnych przywyczajen. W ramach przeprosin przyklad ponizej

gosienkami

3.04.2009, 16:00:45

a masz jakis przykład z wyjasnieniem

Cytat(pi_wo @ 3.04.2009, 16:29:48 )

[HTML] pobierz, plaintext 
var from = "id pierwszej otwieranej zakładki";
 
function switchPanel(to)
{
document.getElementById(to).style.display='block';
document.getElementById(from).style.display='hidden';
from = to;
}
[HTML] pobierz, plaintext

pi_wo

3.04.2009, 19:12:03

[HTML] pobierz, plaintext 
<html>
<head>
 
    <script type="text/javascript">
 
    var from = "zak1";
 
    function switchPanel(to)
    {
        document.getElementById(from).className='ukryta_zakladka';
        document.getElementById(to).className='zakladka';
        from = to;
    }        
 
    </script>
 
    <style type="text/css" media="all">
    body{
        font-family: Tahoma, Helvetica, sans-serif;
        font-size: 10px;
    }    
 
    div.przycisk{
        background-color: #555;
        font-family: Tahoma, Helvetica, sans-serif;
        color:#FFF;
        margin-right: 5px;
        width: 80px;
        height: 15px;
        cursor: pointer;
        float: left;
        text-align: center;
    }
 
    div.zakladka{
        border: 1px solid #555;
        display: block;
        float: left;
        clear: both;
        width: 800px;
 
    }
 
    div.ukryta_zakladka{
        display: none;
        float: left;
        clear: both;
        width: 800px;
    }
 
    </style> 
 
</head>
 
<body>
 
<div class="przycisk" onclick="switchPanel('zak1')">Zakładka 1</div>
<div class="przycisk" onclick="switchPanel('zak2')">Zakładka 2</div>
<div class="przycisk" onclick="switchPanel('zak3')">Zakładka 3</div>
<div id="zak1" class="zakladka">Test zakładki 111111111111111111111111</div>
<div id="zak2" class="ukryta_zakladka">Test zakładki 222222222222222222222222</div>
<div id="zak3" class="ukryta_zakladka">Test zakładki 333333333333333333333333</div>
 
</body>
 
</html>
[HTML] pobierz, plaintext

Tak to widzę

Bez fajerwerków, ale działa całkiem sprawnie. W przeciwieństwie do wcześniejszego zamysłu tutaj zmieniam nazwe klasy. Ale założenie jest to samo.

K4mil94

3.04.2009, 19:34:29

Testowałem działa ;D Dzięki kolego tylko jeszcze powiedz jak to zrobić żeby się zakładka po najechaniu zmieniała ;]

piotrooo89

3.04.2009, 19:37:20

onMouseOver.

K4mil94

3.04.2009, 19:40:28

Dzięki ;]

gosienkami

4.04.2009, 14:51:27

a co do tego dopisać zeby zakładki zmieniały sie same po jakis czasie

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.