[JS]Alle div-id's in array class nonactive maken

zondag 30 januari 2011 18:07

Acties:

0 Henk 'm!

Alweer 16 jaar hier

Topicstarter

Hallo,
Ik heb een pagina waarin ik wil dat als je hovert op link 1 dat tab1 opent, als je link2 hovert, tab1 verdwijnt en tab2 opent. je kan zeggen, voor elke tab een aparte functie, zeggen overige tabs op class nonactive en dan tab van hover op class active, maar bij 10 tabs is dat erg omslachtig, nu dacht ik dat als je in de link onMouseover="functie(tabnaam)" zet, je in javascript kan zeggen dat je die tabnaam active maakt, en alle andere tabnamen (in array) notactive. En dan een for in loop, waardoor je iedere waarde in een array notactive maakt:

JavaScript:

for (x in alltabs) {
 var tab = alltabs[x];
 tab.className = 'nonactive';
 }

alltabs is dan de array met 5 waardes, tab1, tab2, tab3, tab4 en tab5.
maar het werkt niet als ik het volgende doe:

HTML:

<html>
 <head>
  <style type="text/css">
  .nonactive {display: none;}
  #tab1, #tab2 { float: left;}
  </style>
  <script type="text/javascript">
     var alltabs = new Array();
     alltabs[0] = "tab1";
     alltabs[1] = "tab2";
     alltabs[2] = "tab3";
     alltabs[3] = "tab4";
     alltabs[4] = "tab5";
     var x;
    function change_class(zap) {
     for (x in alltabs) {
     var tab = alltabs[x];
     tab.className = 'nonactive';
     }
     zap.className = 'active';
    }
  </script> 
 </head>
 <body>
  <div class="uitklaptekst">
   <a href="#" onMouseover="change_class('tab1');">Verschijn tab1</a>
   <a href='#' onMouseover="change_class('tab2');">Verschijn tab2</a>
   <a href="#" onMouseover="change_class('tab3');">Verschijn tab3</a>
   <a href="#" onmouseover="change_class('tab4');">Verschijn tab4</a>
   <a href="#" onMouseover="change_class('tab5');">Verschijn tab5</a>
  </div>
  <div id="tab1" class="nonactive">
   <p>tab1</p>
  </div>
  <div id="tab2" class="active">
   <p>tab2</p>
  </div>
  <div id="tab3" class="nonactive">
   <p>tab3</p>
  </div>
  <div id="tab4" class="nonactive">
   <p>tab4</p>
  </div>
  <div id="tab5" class="nonactive">
   <p>tab5</p>
  </div>
 </body>
</html>

wat doe ik fout?

2x Dell UP2716D | R9 7950X | 128GB RAM | 980 Pro 2TB x2 | RTX2070 Super
.oisyn: Windows is net zo slecht in commandline als Linux in GUI

zondag 30 januari 2011 20:20

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

Zo ongeveer alles. Je hebt javascript in je html, je gebruikt de Array-constructor, je gebruikt de for..in loop voor een array en je gebruikt globale variabelen.

Buiten dat, een hintje: je probeert className te zetten op een string object.

En een tip: installeer FireBug en leer hoe je dat kunt gebruiken. Dan was je er zelf achter gekomen.

[ Voor 17% gewijzigd door _Thanatos_ op 30-01-2011 20:21 ]

日本！🎌

zondag 30 januari 2011 20:28

Acties:

0 Henk 'm!

F.West98

Alweer 16 jaar hier

Topicstarter

de way die wel werkt (nu) is:

JavaScript:

function change_classtab1() {
     tab1.className = 'active';
     tab2.className = 'nonactive';
     tab3.className = 'nonactive';
     tab4.className = 'nonactive';
     tab5.className = 'nonactive';
     tab6.className = 'nonactive';
     tab7.className = 'nonactive';
     tab8.className = 'nonactive';
     tab9.className = 'nonactive';
     tab10.className = 'nonactive';
     tab11.className = 'nonactive';
    }
    // En zo voor elke tab...

maar heeeel erg omslachtig....
daarom wilde ik een tab invullen die dan active wordt en de rest nonactive, maar hoe doe ik dat?

[ Voor 76% gewijzigd door MueR op 30-01-2011 21:00 ]

2x Dell UP2716D | R9 7950X | 128GB RAM | 980 Pro 2TB x2 | RTX2070 Super
.oisyn: Windows is net zo slecht in commandline als Linux in GUI

zondag 30 januari 2011 20:36

Acties:

0 Henk 'm!

kaesve

oh wauw... hoe kan je zoiets produceren..?

nee werkelijk, hoe lukt het je wel om de juiste variabelen los aan te spreken, maar niet om ze in een lijstje te stoppen?

zondag 30 januari 2011 20:41

Acties:

0 Henk 'm!

Matis

Rubber Rocket

Wat je moet doen, hang aan alle tabs een gelijke class, bijvoorbeeld navtab oid.

Als je klikt op een bepaalde tab, roep je een javascriptfunctie aan met als argument this. In die js-functie gebruik je een selector, welke alle tabs, behalve de this-tab op nonactive zet.

Easy as that.

Scratch that, met een selector menu gaat dat niet zo eenvoudig werken.

[ Voor 12% gewijzigd door Matis op 30-01-2011 20:55 ]

If money talks then I'm a mime
If time is money then I'm out of time

maandag 31 januari 2011 09:05

Acties:

0 Henk 'm!

R4gnax

Javascript

Ipv met de hand te gaan lopen klooien: kijk alsjeblieft naar jQuery UI's tabs widget.

maandag 31 januari 2011 10:21

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Dus om een relatief simpel stuk javascript niet te hoeven schrijven laad je maar een compleet framework in? Nee, dat is efficient

Anyone who gets in between me and my morning coffee should be insecure.

maandag 31 januari 2011 10:24

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Javascript

En dan een for in loop, waardoor je iedere waarde in een array notactive maakt:

Waarom hou je niet gewoon bij welke tab 'active' is; dan hoef je alleen maar een simpele toggle te doen:

pseudo:

JavaScript:

if (currentActiveTab)
    currentActiveTab.className = 'inactive';

currentActiveTab = newActiveTab;
currentActiveTab.className = 'active';

Intentionally left blank

maandag 31 januari 2011 13:29

Acties:

0 Henk 'm!

R4gnax

Javascript

MueR schreef op maandag 31 januari 2011 @ 10:21:
Dus om een relatief simpel stuk javascript niet te hoeven schrijven laad je maar een compleet framework in? Nee, dat is efficient

Dat stukje kan voor ons inderdaad relatief simpel zijn *), maar voor iemand met beperkte achtergrondkennis van JavaScript en die gewoon even een setje tabs wil hebben, zou ik toch liever voor een packaged oplossing gaan. Eigenlijk zou ik sowieso voor een reeds goed in elkeer stekende standaard gaan, in plaats van continu het wiel opnieuw uit te vinden en/of copy/paste toe te passen.

Mensen moeten eens ophouden te zeuren over JavaScript libraries wanneer de gemiddelde foto al groter is dan een minified+gzipped versie van een dergelijke library, die je daarnaast in de meeste gevallen ook nog eens van een CDN af kunt halen. In dat geval zijn er niet eens extra bandbreedte kosten en heb je dikke kans dat de file al in de cache van de bezoeker zit.

Als je het wilt hebben over efficiëntie, begin dan maar eens met klagen over inline script tags en inline event handlers, waarop het parsen van de pagina elke keer blokkeert en er elke keer JavaScript ge-evalueerd en gedraaid moet worden...

*) Als je het gedrag gewoon hardcoded er op zet ( blech!

) dan is het inderdaad triviaal simpel. Wil je iets herbruikbaars maken, dan wordt het al interessanter.

maandag 31 januari 2011 15:22

Acties:

0 Henk 'm!

F.West98

Alweer 16 jaar hier

Topicstarter

crisp schreef op maandag 31 januari 2011 @ 10:24:
[...]

Waarom hou je niet gewoon bij welke tab 'active' is; dan hoef je alleen maar een simpele toggle te doen:

pseudo:
JavaScript:
1
2
3
4
5
if (currentActiveTab)
    currentActiveTab.className = 'inactive';

currentActiveTab = newActiveTab;
currentActiveTab.className = 'active';

maar hoe weet het script dan welke tab je hebt aangeklikt en welke active moet worden

2x Dell UP2716D | R9 7950X | 128GB RAM | 980 Pro 2TB x2 | RTX2070 Super
.oisyn: Windows is net zo slecht in commandline als Linux in GUI

dinsdag 1 februari 2011 00:13

Acties:

0 Henk 'm!

darkdeathrip

Oke ik dacht laat ik je het even gemakkelijk maken.
Ik zou persoonlijk alles in jquery doen, is makkelijker en minder schrijven.
Hieronder zie je de code:

code:

<html>
<head>
    <title>js example tweakers 1</title>
    <style type="text/css">
        .uitklap a{
        width: 150px;
        float: left;
        display: block;
        }
        #tabs{
        clear: both;
        }
        .tab{
        display: none;
        width: 150px;
        height: 10px;
        border: solid 1px #000;
        float: left;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><\/script>');</script>
    <script type="text/javascript"> 
    $(document).ready(function() {
        $(".uitklap a").hover(function() {
            $("#tabs .tab:eq("+$(this).parent().children().index(this)+")").css("display","table");
        }, 
        function() {
            $("#tabs .tab:eq("+$(this).parent().children().index(this)+")").css("display","none");
        });
    });
    </script>
</head>
<body>
    <div class="uitklap">
        <a href="#">Verschijn tab1</a>
        <a href="#">Verschijn tab2</a>
        <a href="#">Verschijn tab3</a>
    </div>
    <div id="tabs">
        <div class="tab">
            <p>tab1</p>
        </div>
        <div class="tab">
            <p>tab2</p>
        </div>
        <div class="tab">
            <p>tab3</p>
        </div>
    </div>
</body>
</html>

Als je nog verder vragen hebt hoor ik het wel.

dinsdag 1 februari 2011 07:40

Acties:

0 Henk 'm!

Sebazztiaan

sebas!

MueR schreef op maandag 31 januari 2011 @ 10:21:
Dus om een relatief simpel stuk javascript niet te hoeven schrijven laad je maar een compleet framework in? Nee, dat is efficient

Jquery is niet heeeeel zwaar en het .each statement is wel handig, ook hoef je dan niet meer na te denken over andere incompatibility issues, wel een beetje een hamer oplossing, maar OP heeft aan zijn code te zien niet de skills om zelf een stukje JS te produceren wat werkt...

dinsdag 1 februari 2011 10:03

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Toch is crisp's voorbeeld slechts 4 regeltjes code. Je maakt mij niet wijs dat jquery minder zwaar is. Ik zal niet beweren dat ik anders doe, ik gebruik ook vrijwel altijd mootools in mn projecten, maar om nu te zeggen dat het the best thing since sliced bread is, gaat me te ver. Het is voor iets simpels als tabjes gewoon niet nodig.

Anyone who gets in between me and my morning coffee should be insecure.

dinsdag 1 februari 2011 13:03

Acties:

0 Henk 'm!

R4gnax

Javascript

MueR schreef op dinsdag 01 februari 2011 @ 10:03:
Toch is crisp's voorbeeld slechts 4 regeltjes code.

Het is dan ook een extreem overgesimplificeerde weergave van een gedeelte v/d totaal oplossing.

[ Voor 3% gewijzigd door R4gnax op 01-02-2011 13:03 ]

dinsdag 1 februari 2011 14:38

Acties:

0 Henk 'm!

darkdeathrip

MueR schreef op dinsdag 01 februari 2011 @ 10:03:
Toch is crisp's voorbeeld slechts 4 regeltjes code. Je maakt mij niet wijs dat jquery minder zwaar is. Ik zal niet beweren dat ik anders doe, ik gebruik ook vrijwel altijd mootools in mn projecten, maar om nu te zeggen dat het the best thing since sliced bread is, gaat me te ver. Het is voor iets simpels als tabjes gewoon niet nodig.

Crisp's code was pseudo, kortom niet af!
Mijn voorbeeld is af, en heeft maar 8 regels code (js/jquery).
En hij kijkt of het document wel klaar is.
Ik zeg niet dat jquery beter is.
Maar het is in ieder geval voor een beginner zoals de meneer in deze post, heel handig.
Verder staak ik hierbij de discussie over wat nou wel of niet goed is,
En heeft de topic maker zijn antwoord als het goed is.

dinsdag 1 februari 2011 15:19

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

darkdeathrip schreef op dinsdag 01 februari 2011 @ 14:38:
Crisp's code was pseudo, kortom niet af!

Vervolgens zet je er function(newActiveTab) { .. } omheen en het werkt.. Inline, dat wel.

Mijn voorbeeld is af, en heeft maar 8 regels code (js/jquery). En hij kijkt of het document wel klaar is.

Plus een paar duizend van jQuery. Om de events netjes te zetten en op domready te wachten kost je in standaard JS ook niet bijster veel code.

Ik zeg niet dat jquery beter is. Maar het is in ieder geval voor een beginner zoals de meneer in deze post, heel handig.

Kant en klare scriptjes ook, maar of het goed is om de basis te leren?

Verder staak ik hierbij de discussie over wat nou wel of niet goed is,

Fijne manier van discussieren heb je. Je komt een topic binnen fietsen, dumpt een stelling en meent vervolgens de discussie te kunnen staken? Misschien moet je toch even nadenken hoe een discussieforum werkt. Ik zal je een hint geven: niet op jouw manier.

Anyone who gets in between me and my morning coffee should be insecure.

dinsdag 1 februari 2011 15:58

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Javascript

Jongens, jongens, dit topic gaat toch niet over de voor- en nadelen van jQuery?

dinsdag 1 februari 2011 22:14

Acties:

0 Henk 'm!

ReenL

Zo kan het ook:

HTML:

<html> 
 <head> 
  <style type="text/css">
  .uitklaptekst { position: relative }
  .uitklaptekst .tab { float: left; }
  .uitklaptekst .tab .content { display:none; position: absolute; top: 20px; left: 0px }
  .uitklaptekst .tab .default { display:block }
  .uitklaptekst:hover .tab .default { display:none }
  .uitklaptekst .tab:hover .content { display:block }
  </style> 
 </head> 
 <body> 
  <div class="uitklaptekst"> 
   <div class="tab">
    Verschijn tab1
    <div class="content default"> 
     <p>tab1</p> 
    </div>
   </div> 
   <div class="tab">
    Verschijn tab2
    <div class="content"> 
     <p>tab2</p> 
    </div> 
   </div> 
   <div class="tab">
    Verschijn tab3
    <div class="content"> 
     <p>tab3</p> 
    </div> 
   </div> 
   <div class="tab">
    Verschijn tab4
    <div class="content"> 
     <p>tab4</p>
    </div> 
   </div> 
   <div class="tab">
    Verschijn tab5
    <div class="content"> 
     <p>tab5</p> 
    </div> 
   </div> 
 </body> 
</html>

Zonder dollen. ik zou wel gebruik maken van jQuery en de tab widget, maakt het een stuk makkelijker. Het zal vast niet het enige stukje javascript op de hele site zijn/worden.

Dit vind ik wel een moeilijk doen terwijl het makkelijk kan:

code:

1	$("#tabs .tab:eq("+$(this).parent().children().index(this)+")")

dinsdag 1 februari 2011 23:26

Acties:

0 Henk 'm!

Verwijderd

Ik vind de JQuery oplossing er best netjes uit zien en ik denk dat ik eens ga kijken hoe JQuery werkt.

:EDIT:

Ik was vergeten te vermelden dat je in principe nu tab1 t/m tab10000 kunt maken en hij selecteert ze.

In Javascript heb ik het volgende als oplossing:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css">
    .active {
    display: block;
    }

    .nonactive {
    float: left;
    display: none;
    }

    #tab1, #tab2, #tab3, #tab4, #tab5 {
    float: left;
    }
    </style>

    <script type="text/javascript">
    var tabIDs = new Array();

    function getDivs()
    {
        var tabs = document.getElementsByTagName("div");
        var tablength = tabs.length;
        var pattern = new RegExp("tab[0-9]*", "i");

        for(var i = 0; i < tablength; i++)
        {
        if(pattern.test(tabs[i].id))
            tabIDs.push(tabs[i]);
        }
    }

    function showTab(tabname)
    {
        var tablength = tabIDs.length;

        for(var i = 0; i < tablength; i++)
        {
        if(tabname == tabIDs[i].id)
            tabIDs[i].className = 'active';
        else
            tabIDs[i].className = 'nonactive';
        }
    }
    </script>
</head>

<html>
    <body onload="getDivs();">
    <div class="uitklaptekst">
        <a href="#" onMouseover='showTab("tab1")'>Verschijn tab1</a>
        <a href='#' onMouseover='showTab("tab2")'>Verschijn tab2</a>
        <a href="#" onMouseover='showTab("tab3")'>Verschijn tab3</a>
        <a href="#" onmouseover='showTab("tab4")'>Verschijn tab4</a>
        <a href="#" onMouseover='showTab("tab5")'>Verschijn tab5</a>
    </div>

    <div id="tab1" class="active">
        <p>tab1</p>
    </div>

    <div id="tab2" class="nonactive">
        <p>tab2</p>
    </div>

    <div id="tab3" class="nonactive">
        <p>tab3</p>
    </div>

    <div id="tab4" class="nonactive">
        <p>tab4</p>
    </div>

    <div id="tab5" class="nonactive">
        <p>tab5</p>
    </div>
    </body>
</html>

[ Voor 4% gewijzigd door Verwijderd op 01-02-2011 23:32 ]

Onderwerpen