[CSS] Tab navigatie, actieve tab problemen

[Sjoerd]

Ik ben bezig met een tabbed navigatie te maken

klik

De tabs verwijzen niet naar een nieuwe pagina maar laten een div te voorschijn komen of verbergen, het probleem is echter doordat ik niet van pagina wissel het extreem moeilijk blijkt om ervoor te zorgen dat de laatste div die ik heb geklikt, 'actief' blijft zoals bij de hover.

momenteel blijft de eerste tab actief omdat die de id 'activetab' heeft meegekrgen.


Heeft iemand een idee hoe ik dit kan oplossen?
ik heb het ook geprobeerd met js door de linken verschillende id's te geven en dan proberen te switchen:

eerste link:

JavaScript:

document.getElementById('Settings1').id='null';
document.getElementById('Settings2').id='activetab';

2de link:

JavaScript:

document.getElementById('Settings2').id='null';
document.getElementById('Settings1').id='activetab';

Echter geeft dit niets dan problemen en is het vrij lastig bij 6+ tabs...

[BtM909]

Wat voor soort problemen krijg je dan precies?

Hetgeen wat je probeert zou je hiervanaf kunnen kijken (eerste hit met google): http://nontroppo.org/test/tab1.html

en ipv op elke pagina een andere classe toewijzen dat gewoon met JS doen

[remcotolsma]

Er zijn veel scripts te vinden die iets vergelijkbaars doen.

http://www.barelyfitz.com/projects/tabber/
http://onlinetools.org/tools/domtabdata/
http://www.dynarch.com/products/dhtml-tabs/
http://stilbuero.de/jquery/tabs_3/
http://digitarald.de/playground/tabs.html
http://www.silverscripting.com/mootabs/

Het antwoord op je vraag kun je daar vast wel in vinden. Desnoods kun je natuurlijk ook gewoon gebruik maken van één van die scripts.

[Verwijderd]

HTML:

<ul id="tabs">
    <li><a href="alternatievepagina.html" onclick="showDiv(this)">klik</a></li>
    <li><a href="alternatievepagina.html" onclick="showDiv(this)">klik</a></li>
</ul>

Cascading Stylesheet:

#tabs a:hover,
#tabs a.activeTab {
    //styles voor active en hover tabs
}

JavaScript:

function showDiv(anchor) {
    //code om de div te tonen
    anchor.className = 'activeTab';
}

Denk dat dit zou moeten werken

[BtM909]

Verwijderd schreef op vrijdag 04 januari 2008 @ 19:49:

JavaScript:

function showDiv(anchor) {
    //code om de div te tonen
    anchor.className = 'activeTab';
}

Denk dat dit zou moeten werken

Niet helemaal, tenzij dit alleen een aanzet is, want je wilt toch graag de class activeTab toevoegen of verwijderen

[Sjoerd]

BtM909 schreef op vrijdag 04 januari 2008 @ 19:46:
Wat voor soort problemen krijg je dan precies?

Hetgeen wat je probeert zou je hiervanaf kunnen kijken (eerste hit met google): http://nontroppo.org/test/tab1.html

en ipv op elke pagina een andere classe toewijzen dat gewoon met JS doen

bedankt voor alle antwoorden, het toewijzen van een klasse probeerde ik inderdaad (maar dan toewijzen van een id, zoals in mijn javascript testje echter lukt dit niet, lees: bij de 2de heeft hij geen properties?)

remcotolsma: zitten erg mooie voorbeelden, tussen maar ik wil het zelf doen in mijn ogen zijn ze ook allemaal te lang voor wat het bij mij moet kunnen , al kan ik deze http://onlinetools.org/tools/domtabdata/ wel is gaan bestuderen

Smith: bedankt ga het is even testen

[ Voor 4% gewijzigd door Sjoerd op 04-01-2008 19:59 ]

[steffex]

Gebruik altijd een functie om alle tabs normaal te maken en vervolgens 1 te activeren.

Even uit mijn hoofd:

JavaScript:

function makeActive(tabid)
{
var tablist = document.getElementById('tabs');
var tabs = tablist.getElementsByTagName('li');
for(i in tabs)
{
   tabs[i].className='normal';

   if(tabs[i].id == tabid)
   {
   tabs[i].className='active';
   }
}

gebruik het zo:

HTML:

<ul id="tabs"> 
    <li id="tab1" class="normal"><a href="#" onclick="makeActive('tab1');showDiv(this);">klik</a></li> 
    <li id="tab2" class="normal"><a href="#" onclick="makeActive('tab2');showDiv(this);">klik</a></li> 
</ul>

Je zou de functie makeActive ook aan kunnen passen zodat je alle divjes in een container op display="none" zet en vervolgens de gewenste op block zet!

[ Voor 10% gewijzigd door steffex op 04-01-2008 20:04 ]