Archief - HTML/JS: script voor tabs id="selected"

HTrance · 24 mrt 2007

Ok, ik heb een site waarin ik met tabs werk.
Ik maak gebruik via CSS om het geselecteerde tabblad het id "selected" mee te geven. Op die manier krijg je een tabblad dat zich onderscheid van de andere om duidelijk aan te geven op welk tabblad je zit.

Maar nu... Ik vind iframes superb en daardoor herlaadt de hele pagina niet.
Dus het menu met de tabs blijft in dezelfde stand ook al heb ik op een ander tabblad geklikt.

Nu had ik gedacht dat je via javascript document.write zou kunnen gebruiken om naargelang het geklikte tabblad id="selected" aan dat tabblad toe te kennen. Maar nu is mijn vraag, hoe kan je dit doen (ik ken namelijk niks van scripten)? :unsure:

zo ziet m'n html er nu uit (die selected zou dus naargelang het geklikte tabblad moeten wijzigen van <li>... (En uiteraard moet het tabblad dat dan verlaten wordt terug niet geselecteerd worden)

HTML:

<li id="selected"><a href="iframe_pag1.html" target="Inhoud">pagina1</a></li>
<li><a href="iframe_pag2.html" target="Inhoud">pagina2</a></li>
<li><a href="iframe_pag3.html" target="Inhoud">pagina3</a></li>
<li><a href="iframe_pag4.html" target="Inhoud">pagina4</a></li>
<li><a href="iframe_pag5.html" target="Inhoud">pagina5</a></li>

HTrance · 25 mrt 2007

Aangezien ik niks ken van javascript heb ik dit eens geprobeerd:
in head staat er:

HTML:

<script type="text/javascript">
function selectedId()
 {
    document.write('id="selected"');
 }
</script>

in m'n body staat er:

HTML:

<li onclick="SelectedId(); doRefresh();"><a href="iframe_uraw00t.html" target="Inhoud">U r a w00t</a></li>

maar als ik er dus op klik dan gebeurt er helemaal niks :/.

Xavez · 25 mrt 2007

Ge kunt dan feitelijk beter via uw javascript rechtstreeks de .style aanpassen

Smoerf · 25 mrt 2007

javascript les 1:

Javascript is HOOFDLETTERGEVOELIG dus de functie SelectId() bestaat niet...

HTrance · 26 mrt 2007

idd, die hoofdletter deed 't hem... Afin 't scriptje werkt nu wel, maar niet zoals ik zou willen.
Ik dacht dat hij die id=selected zou zetten tussen m'n <li>. Maar wat hij wel doet is de pagina laden en id=selected als tekst weergeven..
Hoe zorg ik ervoor dat hij hetgeen dat moet gewrite worden dat dit binnen die <li> staat?

Smoerf · 26 mrt 2007

id meegeven ofwehis, waarmee je de focus op het object legt.
En best classes gebruiken, maar je moet ook bijhouden welke actief was dus zoiets

in je header

Code:

var sel = 1;

function doSelection(id){
   if (id != sel){
      document.getElementById('page' + id).className = 'selected';
      document.getElementById('page' + sel).className = '';
      sel = id;
   }
}

in je body

HTML:

<li id="page1" onclick="doSelection(1);" class="selected"><a href="iframe_pag1.html" target="Inhoud">pagina1</a></li>
<li id="page2" onclick="doSelection(2);"><a href="iframe_pag2.html" target="Inhoud">pagina2</a></li>
<li id="page3" onclick="doSelection(3);"><a href="iframe_pag3.html" target="Inhoud">pagina3</a></li>
<li id="page4" onclick="doSelection(4);"><a href="iframe_pag4.html" target="Inhoud">pagina4</a></li>
<li id="page5" onclick="doSelection(5);"><a href="iframe_pag5.html" target="Inhoud">pagina5</a></li>

Het is een vlugge oplossing maar je zou er min of meer mee geholpen moeten zijn.

HTrance · 26 mrt 2007

Naar aanleiding van je post heb ik dus de oplossing overgenomen (ik ga hieronder alles posten wat ik heb gedaan zodat anderen die dezelfde vraag zouden hebben ook snel de oplossing kunnen vinden)

head

HTML:

<script type="text/javascript">
	var sel = 1;
	
function doSelection(id){
   if (id != sel){
	  document.getElementById('link' + id).className = "selected";
	  document.getElementById('link' + sel).className = "";
	  sel = id;
	}
}
</script>

body

HTML:

<li id="link1" onclick="doSelection(1);" class=""><a href="iframe_link1.html" target="Inhoud">link1</a></li>
<li id="link2" onclick="doSelection(2);" class=""><a href="iframe_link2.html" target="Inhoud">link2</a></li>
<li id="link3" onclick="doSelection(3);" class=""><a href="iframe_link3.html" target="Inhoud">link3</a></li>
<li id="link4" onclick="doSelection(4);" class=""><a href="iframe_link4.html" target="Inhoud">link4</a></li>
<li id="link5" onclick="doSelection(5);" class=""><a href="iframe_link5.html" target="Inhoud">link5</a></li>

(Als ik in de body bij class al selected toeken dan worden alle links als selected weergegeven terwijl er nog geen enkele tab is geselecteerd, daarom dat ik "" zet.)

externe css

Code:

#menu .selected{
	font-weight: bold;
	background-image: url("../images-site/blue_active_tab_r.png");
}
#menu .selected a{
	background-image: url("../images-site/blue_active_tab_l.png");
	color: #7CA6D4;
}

En... het werkt 100% !

U meneer... U verdient een standbeeld

Smoerf · 26 mrt 2007

normaal zou het moeten gaan hoor om aan 1 class een selected toe te kennen. Post anders eens uw css?

HTrance · 26 mrt 2007

Smoerf zei:
normaal zou het moeten gaan hoor om aan 1 class een selected toe te kennen. Post anders eens uw css?

hier de link naar de pagina zelf

hier de link naar de css-file

En je hebt gelijk dat 1 class voldoende is, maar ik had 't eerst getest en toen werkte het niet. Dus ik had overal class selected gezet. Maar wat bleek toen, dat de fout in het scriptje zat (een accolade verkeerd gezet). En heb dan eigenlijk niet meer de moeite gedaan om te zien of 't overbodig was, want 't werkte

.

Maar zoals je zegt, 1 class is voldoende

dJeez · 27 mrt 2007

Smoerf zei:
javascript les 1:

Javascript is HOOFDLETTERGEVOELIG dus de functie SelectId() bestaat niet...

Javascript les 2 :

Gebruik steeds de Javascript debugger/Error console als er iets niet werkt (de Webdeveloper plugin van Firefox is trouwens ook wel zeer handig).

Archief - HTML/JS: script voor tabs id="selected"

HTrance

Legacy Member

HTrance

Legacy Member

Xavez

Legacy Member

Smoerf

Legacy Member

HTrance

Legacy Member

Smoerf

Legacy Member

HTrance

Legacy Member

Smoerf

Legacy Member

HTrance

Legacy Member

dJeez

Legacy Member