Archief - JS: tabs 'here'

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
T

TheBram

Legacy Member
hallo, ik probeer een tab menuutje te maken met JS, alles lukt goed en wel maar ik zou graag zoals ik met css al eens heb gedaan de 'here' style gebruiken, zodat bij de tab die ik aanklik het onderste lijntje verandert in de achtergrondkleur, momenteel hovert hij de tab gewoon


deze code gebruikte ik met css om het te verwezelijken

#tabs ul li.here {
border-bottom: 1px solid #ffc;
list-style: none;
display: inline;
}
Klik om te vergroten...


dit is mijn huidige code:

<html>
<head>
<title></title>

<script language="JavaScript">
var currentPanel;

function showPanel(panelNum) {
//hide visible panel, show selected panel,
//set tab
if (currentPanel != null) {
hidePanel();
}
document.getElementById
('panel'+panelNum).style.visibility = 'visible';
currentPanel = panelNum;
setState(panelNum);
}

function hidePanel() {
//hide visible panel, unhilite tab
document.getElementById
('panel'+currentPanel).style.visibility =
'hidden';
document.getElementById
('tab'+currentPanel).style.backgroundColor =
'#ffffff';
document.getElementById
('tab'+currentPanel).style.color = 'navy';
}

function setState(tabNum) {
if (tabNum==currentPanel) {
document.getElementById
('tab'+tabNum).style.backgroundColor =
'#ddddff';
document.getElementById
('tab'+tabNum).style.color = 'red';
}
else {
document.getElementById
('tab'+tabNum).style.backgroundColor =
'#ffffff';
document.getElementById
('tab'+tabNum).style.color = 'navy';
}
}

function hover(tab) {
tab.style.backgroundColor = 'ddddff';
}
</script>

<style>
.tab{
color: navy;
background-color: white;
border: thin solid navy;
position: absolute;
top: 10;
width: 140;
text-align: center;
font: 9pt Verdana,sans-serif;
z-index: 2;
padding: 3;
cursor: pointer;
cursor: hand;
}
.panel{
position: absolute;
top: 32;
left: 10;
width: 95%;
z-index: 1;
height: 85%;
visibility: hidden;
font: 12pt Verdana,sans-serif;
color: navy;
border: thin solid navy;
padding: 10;
overflow: auto;
}
</style>


</head>

<body onLoad="showPanel(1)">

<div id="tab1" class="tab" style="left: 10;"
onClick = "showPanel(1);"
onMouseOver="hover(this);"
onMouseOut="setState(1)">Tab One</div>
<div id="tab2" class="tab" style="left: 150;"
onClick = "showPanel(2);"
onMouseOver="hover(this);"
onMouseOut="setState(2)">Tab Two</div>
<div id="tab3" class="tab" style="left: 290;"
onClick = "showPanel(3);"
onMouseOver="hover(this);"
onMouseOut="setState(3)">Tab Three</div>
<div id="tab4" class="tab" style="left: 430;"
onClick = "showPanel(4);"
onMouseOver="hover(this);"
onMouseOut="setState(4)">Tab Four</div>
<div id="tab5" class="tab" style="left: 570;"
onClick = "showPanel(5);"
onMouseOver="hover(this);"
onMouseOut="setState(5)">Tab Five</div>
<div id="panel1" class="panel">Panel 1</div>
<div id="panel2" class="panel">Panel 2</div>
<div id="panel3" class="panel">Panel 3</div>
<div id="panel4" class="panel">Panel 4</div>
<div id="panel5" class="panel">Panel 5</div>


</body>
</html>
Klik om te vergroten...


hoe kan ik het in mijn JS script verwerken?

merci
L

L0|2|23

Legacy Member
In setState iets in deze aard onderaan erbij plakken:
Code: 
for(var i=1, tab; tab=document.getElementById('tab'+i); ++i)
    tab.className = tab.className.replace(/\s+|\bhere\b/, ' ')+(i==tabNum?' here':'');
Het verwijdert de 'here' classe van elke tab, behalve op de tab waar de state op wordt gezet. Verder vind ik het inline opgeven van de events niet echt proper (het is een zesvoudige copypaste), maar het werkt natuurlijk wel en tenzij je perfectionist bent zou ik het nu wel laten staan. Wat je wel nog kan doen is die inline style attributen wegdoen, elke tab heeft immers zijn eigen id gekregen en die left:_px; kan je dan in je CSS zetten.
T

TheBram

Legacy Member
met die code erin verandert er simpelweg niets momenteel ziet mn code er zo uit

function setState(tabNum) {
if (tabNum==currentPanel) {
document.getElementById
('tab'+tabNum).style.backgroundColor =
'#ddddff';
document.getElementById
('tab'+tabNum).style.color = 'red';
}
else {
document.getElementById
('tab'+tabNum).style.backgroundColor =
'#ffffff';
document.getElementById
('tab'+tabNum).style.color = 'navy';
}
{
for(var i=1, tab; tab=document.getElementById('tab'+i); ++i)
tab.className = tab.className.replace(/\s+|\bhere\b/, ' ')+(i==tabNum?' here':'');
}
}
Klik om te vergroten...

zit hier al mss de fout in, want kben nog maar een beginner mee JS, veel kopieren en plakken, maar weinig begrijpen

van hetgeen je laatst zegt snappik egt de kloten, inline style atributen weglaten en in css zette:wtf: sry ma kben nog maar en beginneling

tg alvast bedankt
L

L0|2|23

Legacy Member
Je hebt blijkbaar nog twee accolades rond die forlus gezet, die moeten weg. De code boven de forlus wordt normaal gezien overbodig: elke tab heeft een standaardopmaak mbv de klasse 'tab', en bovendien zal er een extra klasse 'here' toegepast worden op de huidige tab. Zet dus je al die opmaak van de javascript in de overeenkomstige klassen in CSS als je dat nog niet gedaan had.

Met inline style bedoel ik dat je in je html style="..." hebt geschreven bij elementen die een id="..." hebben. Je kan hetzelfde effect bereiken op een elegantere wijze door die style="..." weg te doen en de inhoud te schrijven in je CSS bestand onder #id { ...hier de style eigenschappen... }.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan