jquery

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior Front-end Developer vacature

Jij weet wat er nodig is. Jouw hart gaat sneller kloppen van techniek. Jij wil vooruit. Ben jij de Front-end Developer die we zoeken? Je bent creatief, thuis in gebruikersinteractie en een gedreven engineer in hart en nieren. Daarnaast heb jij een klantgerichte en proactieve houding. Precies de kwaliteiten die een Front-end Developer nodig heeft. Wat doe je als Developer? Als Front-end Developer werk je aan de technische realisatie van front-end (web)applicaties in de verschillende uitdagende opdrachten voor Sogeti’s klanten. Dit kan zowel op klantlocatie zijn, als binnen het Center of Excellence van Sogeti. Jij houdt van het uitdenken en

Bekijk vacature »

allround software ontwikkelaar

Allround software ontwikkelaar. We zoeken een medior of senior allround software man/vrouw die klaar is om aan de leuke projecten aan te pakken die al klaar liggen voor je. De projecten zullen variëren van klein tot groot en is dus veel afwisseling. Voor ons is er geen dag hetzelfde als die van gisteren. Gisteren bouwde je nog een complexe applicatie, vandaag integreren we tussen systemen, morgen ben je een applicatie aan het schrijven. Wat ga jij doen? Je bent verantwoordelijk voor het hele proces, van de architectuur tot de database en de gebruiksvriendelijkheid van de systemen. We hebben een kleine

Bekijk vacature »

VB.NET / C# Winforms developer gezocht voor onderh

Voor een bedrijf in het centrum van Rotterdam zijn we op zoek naar een .NET developer. Het gaat om een bedrijf dat een software platform beheerd waarop verschillende partijen aangesloten zijn voor de afhandeling van financiële administratieve processen. De organisatie bestaat uit circa 200 mensen waarvan 80 op de locatie waar deze vacature speelt. Het team zelf bestaat uit 12 mensen waaronder 7 .NET developers. Er zijn 2 seniors en 5 mediors. Binnen het bedrijf draaien twee systemen. Het kernsysteem en het legacy systeem. Het kernsysteem is grotendeels op .NET gemaakt en deels .NET Core, de frontend is een MVVM

Bekijk vacature »

Front-End Developer / JavaScript/ Vue / 5200 euro

Functieomschrijving Wil jij graag als Front-end Developer werken voor een internationale en toonaangevende organisatie? Ben jij altijd op de hoogte van de modernste technieken? En is het voor jou een sport om hoogwaardige codes te schrijven? Lees snel verder! Het ontwikkelen van de online platvormen met behulp van JavaScript en Vue; Werken aan lange termijn projecten; Je schrijft kwalitatieve code en test dit door middel van unit tests; Wensen van de Product Owner vertalen naar technische oplossingen; Het geven van workshops en trainingen; Analytisch en kritisch meedenken over verbeteringen in tools en werkwijzen. Functie-eisen Je hebt HBO/WO werk- en denkniveau;

Bekijk vacature »

Senior Java Developer vacature

Jij volgt ontwikkelingen op de voet. Sterker nog: jij bent er onderdeel van. Jij loopt voorop. Jij denkt met klanten mee en helpt hen innoveren. Zo kun jij een bijdrage leveren aan de Rabobank-app, de beveiliging van treinen voor Pro-rail verbeteren of de website van ING een boost geven. Vergaderen? Liever gewoon zorgen dat het werkt! Hoe omschrijft men een Sogetist? Gedreven, resultaatgericht en niet snel tevreden. Wat niet wil zeggen dat je nooit met hem of haar kunt lachen. Integendeel. Plezier hoort wat ons betreft net zo goed bij werken. Maar we gaan op de eerste plaats voor de

Bekijk vacature »

Technisch Ontwerper / Applicatieontwikkelaar max.

Wie zoeken we? Je bent de beste in je vak of hebt de ambitie en de potentie om de beste te worden. Je hebt de passie om nieuwe technologieën te blijven leren en continu jezelf te ontwikkelen. Je hebt de pioniersgeest en drive om nieuwe technologieën, methodieken en concepten toe te passen in projecten en bij klanten. Je vindt het leuk om kennis te delen met collega’s, klanten en vakgenoten. Je bent een ware professional en ambassadeur voor CIMSOLUTIONS. Je voelt je thuis in een informele, collegiale en professionele sfeer waar de aandacht voor de klant en voor de medewerker

Bekijk vacature »

Senior .NET Developer voor innovatieve marktleider

Functieomschrijving Jij en de 10 a 15 andere Ontwikkelaars werken samen op Agile wijze aan het verder uitbouwen en het verbeteren van de applicatie. Naast de 'hoofdapplicatie' zijn er nog een heleboel kleinere modules omheen. Ook deze moeten allemaal onderhouden en verder uitgebouwd worden. Je werkzaamheden zijn dus heel divers; de ene dag bouw je een volledige nieuwe module, de andere dag fix je bugs en weer een andere dag Wekelijks wordt er een duidelijke planning opgesteld waarin de doelen voor die week worden vastgelegd. Elke ochtend is er een standup waarin de voortgang besproken wordt. Uiteraard wordt dit ook

Bekijk vacature »

Web Developer - Locatie Woerden of Amsterdam

Ben jij gedreven en klaar voor de eerste stap in jouw carrière of heb jij al wat ervaring en ben je klaar voor een nieuwe uitdaging? Voor een dynamische salesorganisatie zoeken wij een web developer. Bedrijfsomschrijving Met meerdere vestigingen en ruim 80 medewerkers, is onze opdrachtgever een van de grootste resellers op het gebied van documentprocessen en printoplossingen. Als business partner verbeteren zij de productiviteit van hun klanten en weten zij de winstgevendheid te maximaliseren en de tevredenheid te vergroten. Hun klantenbestand bestaat variërend uit de MKB’s tot aan multinationals, die opereren in verschillende branches, zoals grafische bedrijven, financiële dienstverleners

Bekijk vacature »

Front-end Developer Angular 8 Leaseauto

Functieomschrijving Ben jij een Front-end Developer en heeft Angular geen geheimen meer voor jou? Wil jij graag werken met de nieuwste versie Angular 8? Wil jij werken in een dynamisch team bij een snelgroeiend internationaal bedrijf? Lees dan snel verder! Het ontwikkelen van nieuwe front-end applicaties of verbeteren van de bestaande middels Javascript, HTML, CSS en Angular; Het bijdragen in de migratie naar Angular 8. Het leveren van jouw bijdrage aan de vertaalslag van functionele wensen naar de technische oplossing; Het op de hoogte blijven van de nieuwste ontwikkelingen binnen jouw vakgebied; Je voelt je thuis in een internationale omgeving

Bekijk vacature »

C# .NET ontwikkelaar gezocht, detachering (Azure,

Ben je een .NET ontwikkelaar en op zoek naar afwisseling in de regio Rotterdam? Bij een innovatief bedrijf met mogelijkheden om te groeien in zowel functie als kennis? Waar je geen nummer bent maar er aandacht is voor jou als persoon? Wellicht dat deze organisatie je dit kan bieden. Voor een detacheerder in Rotterdam zijn we namelijk op zoek naar gepassioneerde .NET ontwikkelaars. Het bedrijf heeft een regionale werkwijze waarbij ze een aantal vestigingen in Nederland hebben waaronder de hoofdvestiging in Rotterdam. Er werken momenteel circa 80 mensen. Het bedrijf is met name sterk in CRM maatwerk oplossingen en de

Bekijk vacature »

C# .NET Developer / Amsterdam / Financiële om

Functieomschrijving Ben jij een senior C# .NET Developer en wil jij een bijdrage leveren aan een grote Noord-Europese financiële organisatie door innovatieve features te implementeren? Wil jij werken met C# en krijg jij energie van requirements uit de business vertalen naar concrete mogelijkheden? Lees dan nu verder! Als developer nieuwe gave features implementeren; Werken met technieken als C# .NET en (REST) API's webservices; Ontwikkelen van koppelingen middels API's; Maken van technische keuzes en beslissingen over de architectuur; Junior collega's coachen; Initiatief nemen voor nieuwe technische mogelijkheden; Je bent een belangrijke schakel - en vindt het leuk - om te schakelen

Bekijk vacature »

Cloud Software Developer

Als Cloud Software Developer ga je aan de slag met onze SaaS-dienst Zorgplatform. Voor de ontwikkeling hiervan gebruiken wij Microsoft technologie. Zie jij dit als een uitdaging? Lees dan verder! Jouw baan Als Cloud Software Developer ga je werken aan ons Zorgplatform. Dit is een veilige service die uitgebreide ondersteuning biedt voor transmurale samenwerking. Wij ontwikkelen dit in C# in een ASP.NET Core framework. Je gaat aan de slag met het opzetten van microservices voor de verschillende processen die Zorgplatform ondersteunt. Je maakt bijvoorbeeld de integratie voor het inkijken van het medisch dossier mogelijk aan de hand van toelatingen, geregistreerd

Bekijk vacature »

Lead Java Developer / REST / Docker / AWS / IoT

Functieomschrijving Wil jij als Lead Java Developer werken aan tal van high-tech en innovatieve (maatschappelijk verantwoordelijke) oplossingen voor 's werelds grootste organisatie in de technologie? Spreekt het je aan om 60% van de tijd aan de slag te gaan met o.a. Java 8+, Spring, Microservices, Docker en REST en de overige tijd te besteden aan architectuur- en toolkeuzes, het begeleiden van ontwikkelaars en het bepalen van een visie voor een zeer ambitieus DevOps team? Lees dan nu verder! Je werkzaamheden als Lead zullen onder andere bestaan uit: werken aan de ontwikkeling met Java, Spring, REST API's, Microservices, Docker en AWS

Bekijk vacature »

Mendix Front End Ontwikkelaar

Mendix Front-End Developer Voel jij je helemaal thuis in JavaScript, React en React Native en weet je hoe je een top front end voor applicaties moet bouwen? Ben jij op je best wanneer je samenwerkt in een team, maar ook prima in staat om zelfstandig te werken? Dan zijn wij op zoek naar jou! OVER DE VACATURE: Als Mendix Front-End Developer begrijp jij hoe de gebruiker met een applicatie wil interacteren. Jij bent de enabler tussen de gebruiker, (UX-)designer en het Mendix team. Je bent in staat de vraag achter de vraag te achterhalen en zo de behoefte van de

Bekijk vacature »

Jouw passie als Oracle Developer uitten in de logi

Functieomschrijving In deze rol zal je veel afwisseling ervaren waarbij je zowel betrokken bent bij het achterhalen van de wens bij de klant, het functioneel/technisch ontwerp en de ontwikkeling van de software. Je gaat hier werken aan zowel nieuw te bouwen software alsmede ook het onderhoud van bestaande software. Daarbij sta je in contact met grote internationale organisaties in de logistieke sector. Dit betekent dat bij een aantal projecten de voertaal Engels kan zijn en je werkt middels een Scrum aanpak. Momenteel wordt ook APEX software geïmplementeerd bij klanten en bestaat er dus de mogelijkheid om je daarin verder te

Bekijk vacature »
Peter  paul

peter paul

24/11/2008 15:47:00
Quote Anchor link
Ik las dat ik de vraag hier moest stellen en dat voor mijn robleem ik het beste met jquey kon werken.

Ik heb zelf nog nooit met deze taal gewerkt dus weet er weinig tot niets van af.

Ik heb het volgende waar ik tegen aan loop.
Drie knoppen langs elkaar. Daar onder een plaats waar wat content kan.

Ik begin met 3 knoppen zonder content. Als ik op 1 van de knoppen klik moet er content komen van de betreffende knop, klik ik op een andere knop dan komt er die content te staan. Klik ik nogmaals op de zelfde knop dan zou ik graag willen dat de content weer volledig verdwijnt.

Ik heb echt alles afgezocht maar niet gevonden waar ik naar opzoek ben. kan iemand mij aan een stukje code helpen waar ik mee verder kan.
 
PHP hulp

PHP hulp

31/03/2020 12:58:09
 
Ano Niem

Ano Niem

24/11/2008 16:10:00
 
Peter  paul

peter paul

24/11/2008 20:04:00
Quote Anchor link
dankje ik ga zeker nog gebruiken maken van die site. er stonden een aantal mooie dingen op.

Maar ik ben niet tegen gekomen waar ik naar opzoek was.
hier is een voorbeeld van wat ik zoek. let niet op de inhoud zelf ik heb zo maar wat in getypt.

http://www.youtube.com/watch?v=IXlFSAIi3vc

wanneer je iets naar beneden scrolled onder de video zelf zie je. Delen, favoriet, afspeellijst enz. als je der op klikt komt er wat nieuwe content bij en wanneer je op een andere klikt wordt de content vervangen voor de des betreffende knop.

het enige verschil is dat ik ook graag zou willen dat wanneer je met een bepaalde knop de content opent dat je hem ook me de zelfde knop weer kan sluiten.

Kan iemand mij ook aan zo'n script helpen??
 
Peter  paul

peter paul

26/11/2008 15:53:00
Quote Anchor link
Ik schop hem maar weer eens omhoog.
Gewijzigd op 01/01/1970 01:00:00 door peter paul
 
Tamara

Tamara

26/11/2008 16:01:00
Quote Anchor link
kijk is bij jquery plugins....
Gewijzigd op 01/01/1970 01:00:00 door Tamara
 
Jacco Engel

Jacco Engel

26/11/2008 16:10:00
Quote Anchor link
Niet gewoon

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function setContent(bron,doel)
{

    document.getElementById(doel).innerHTML = document.getElementById(bron).value ;
}

function clearContent(doel)
{
    document.getElementById(doel).innerHTML = "" ;
}

</script>
<body>
<textarea id="input_content"></textarea>
<input type="button" value="Set content" onclick="setContent('input_content','content')" />
<input type="button" value="Clear content" onclick="clearContent('content')" />

<div id="content">
</div>
</body>
</html>


Of denk ik nu te makkelijk?
 
Peter  paul

peter paul

28/11/2008 16:18:00
Quote Anchor link
@jacco: Nee, dat is niet echt wat ik bedoel, uiteraard wel bedankt voor je tijd.

Ik zal het nog wat duidelijker proberen uit te leggen.
Als ik naar de pagina ga zie je alleen 3 buttons langs elkaar. Wanneer je op een van de buttons klikt dan komt er onder deze buttons een content gedeelte. De knoppen zijn dus bedoeld om de content te laten zien of juist niet. Maar de knoppen moet en ook zo werken, dat wanneer er al content van button 1 is te zien en je klikt op twee dat dan de content van 1 weg gaat en de content van button 2 er komt te staan.

Hier zie je eigenlijk precies wat ik bedoel.
http://www.youtube.com/watch?v=IXlFSAIi3vc

Wanneer je iets naar beneden scrolled onder de video zelf zie je. Delen, favoriet, afspeellijst enz. als je der op klikt, komt er wat nieuwe content bij en wanneer je op een andere klikt, wordt de content vervangen voor de des betreffende knop.
 
Tamara

Tamara

28/11/2008 16:25:00
Quote Anchor link
linkje

je kan ook even google op de naam die op youtube staat ;)

heb hem binnen 2 minuten gevonden.
 
Peter  paul

peter paul

29/11/2008 15:31:00
Quote Anchor link
bedankt voor een reactie maar ik heb eens naar je link gekeken en het is totaal iets anders dan waar ik naar opezoek ben.

Btw je zegt: Je googled even naar de naam. Maar waar haal je die naam vandaan dan??
 
Niek Weevers

Niek Weevers

29/11/2008 17:11:00
Quote Anchor link
Je wilt in principe met tabs werken.
Dit kan ideaal met jquery. Wat youtube doet is in combinatie met ajax, maar dit hoeft niet. In principe zet je al je content van de verschillende tabjes al in de broncode, je regelt dan alleen nog met jquery welke je laat zien of verbergt.

Kijk hier maar ff. Je kan zelf dan nog erbij scripten dat je standaard niks laat zien.
(Dit is de oudere versie)

Je vroeg ook nog wat jqeury is. Het is simpel gezegd een javascript library (dus het is geen taal). Ik vind hem ideaal, het is een goede library waar je met relatief weinig en makkelijke code leuke dingen uithaalt.
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
 
Peter  paul

peter paul

05/12/2008 15:01:00
Quote Anchor link
Ik heb naar de pagina gekeken die je me linkte maar ik wordt er niet wijzer uit. Ik ben vervolgens maar weer eens verder gaan googlen en heb toen met wat hulp van sites dit gemaakt

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>

<script language="javascript">
function toggle(showHideDiv, switchTextDiv) {
    var ele = document.getElementById(showHideDiv);
    var text = document.getElementById(switchTextDiv);
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "open";
      }    else {
        ele.style.display = "block";
        text.innerHTML = "close";
    }
}


</script>
</head>

<body>
<a id="myFilter" href="javascript:toggle('Filter','myFilter');" >open</a>

                        <div id="Filter" style="display: none;">
                            content</div>

</body>
</html>\


Dit is een beetje wat ik bedoel makkelijk maar het werkt goed. Nou zou ik graag alleen 3 van deze links naast elkaar willen. en als de een geopend is dat die sluit wanneer er op een andere link geklikt wordt.
 
Mitchell

Mitchell

05/12/2008 15:07:00
Quote Anchor link
Een accordion? n_n'
 
Tamara

Tamara

05/12/2008 15:11:00
Quote Anchor link
peter schreef op 29.11.2008 15:31:
bedankt voor een reactie maar ik heb eens naar je link gekeken en het is totaal iets anders dan waar ik naar opezoek ben.

Btw je zegt: Je googled even naar de naam. Maar waar haal je die naam vandaan dan??


nou, dat filmpje heeft een naam/titel... en die titel heb ik gegoogled
 
Niek Weevers

Niek Weevers

05/12/2008 18:18:00
Quote Anchor link
Ok met jquery.
Zorg dus eerst dat je de jquery.js inlaadt.
Daarna maak je de volgende html.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul id="items">
    <li>
        <a class="dicht" href="#" title="Eerste item">Eerste item</a>
        <div>
            Content 1e item
           </div>
    </li>
    <li>
        <a class="dicht" href="#" title="Tweede item">Tweede item</a>
        <div>
            Content 2e item
           </div>
    </li>
    <li>
        <a class="dicht" href="#" title="Derde item">Derde item</a>
        <div>
            Content 3e item
           </div>
    </li>
</ul>


De volgende javascript zet je eronder of in de header
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type="text/javascript">
$("#items div").hide();
                        
// Eerste blok is zichtbaar en de link krijgt class=open
$("#items div:first").show();
$("#items a:first").addClass("open");
$("#items a:first").removeClass("dicht");

$("#items a").click( function()
{
    
    if ( $(this).hasClass("open") )
    {
        $(this).removeClass("open");
        $(this).addClass("dicht");
        $("div", this.parentNode).hide();
    }
    else
    {
        // Alle links met class open, krijgen de class dicht
        $("#items a.open").addClass("dicht");
        $("#items a.open").removeClass("open");
        
        // Alleen de link waar op is geklikt krijgt de class open
        $(this).removeClass("dicht");
        $(this).addClass("open");
        
        // Alle blokken worden ingeklapt
        $("#items div").hide();
        
        // Betreffende blok wordt uitgeklapt
        $("div", this.parentNode).show();
    }
});
</script>


Dit zorgt ervoor dat standaard de eerste open is en wanneer je een andere open klikt dat degene die open is, weer dicht gaat.
Ook heb ik classes toegevoegd zodat je met css de class open anders kan open dan de class dicht.
 
Peter  paul

peter paul

05/12/2008 18:57:00
Quote Anchor link
bedankt voor je hulp, het begint een beetje gênant te worden maar ik kom er nog steeds niet helemaal uit ik heb dit gedaan


Ik heb dit ingeladen http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Eerste item</title>

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$("#items div").hide();
                        
// Eerste blok is zichtbaar en de link krijgt class=open
$("#items div:first").show();
$("#items a:first").addClass("open");
$("#items a:first").removeClass("dicht");

$("#items a").click( function()
{
    
    if ( $(this).hasClass("open") )
    {
        $(this).removeClass("open");
        $(this).addClass("dicht");
        $("div", this.parentNode).hide();
    }
    else
    {
        // Alle links met class open, krijgen de class dicht
        $("#items a.open").addClass("dicht");
        $("#items a.open").removeClass("open");
        
        // Alleen de link waar op is geklikt krijgt de class open
        $(this).removeClass("dicht");
        $(this).addClass("open");
        
        // Alle blokken worden ingeklapt
        $("#items div").hide();
        
        // Betreffende blok wordt uitgeklapt
        $("div", this.parentNode).show();
    }
});
</script>

</head>

<body>
<ul id="items">
    <li>
        <a class="dicht" href="#" title="Eerste item">Eerste item</a>
        <div>
            Content 1e item
           </div>
    </li>
    <li>
        <a class="dicht" href="#" title="Tweede item">Tweede item</a>
        <div>
            Content 2e item
           </div>
    </li>
    <li>
        <a class="dicht" href="#" title="Derde item">Derde item</a>
        <div>
            Content 3e item
           </div>
    </li>
</ul>
</body>

</html>


Maar dan krijg ik het volgende

Eerste item
Content 1e item
Tweede item
Content 2e item
Derde item
Content 3e item

ik krijg dus alles te zien. doe ik iets fout?
 
Niek Weevers

Niek Weevers

05/12/2008 19:09:00
Quote Anchor link
Je hebt het script in je header.
Wat je dan even moet doen is het volgende om je javascript heen zetten
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<script type="text/javascript">
$(function()
{

//je script die je er nu hebt staan

});
</script>

Dan gebruikt hij dit pas als de pagina is geladen. Wanneer je het script in de html onder je stukje html zet dan hoeft bovenstaande niet
 
Peter  paul

peter paul

05/12/2008 19:39:00
Quote Anchor link
hij werkt perfect. Ik weet dat ik lastg ben maar ik heb nog een klein vraagje is het mogelijk om de links langs elkaar te krijgen en dat de content in een ander tabel komt ??
 
Niek Weevers

Niek Weevers

05/12/2008 19:48:00
Quote Anchor link
Dan zou het script iets omgebouwd moeten worden. Dan moet je de links naast elkaar laten floaten.
Daaronder zet je de divs neer, waarvan je er dus maar een laat zien.
Met het klikken moet je dus de juiste div aanroepen.
Het script wat je nu hebt gebruikt (die van mij) roept deze div door te kijken naar de div indezelfde li als de link.

Ik heb er vanavond geen tijd meer voor om dit even om te bouwen (de Sint komt he :D)
Als je een beetje door hebt hoe deze jquery in elkaar zit, dan kun je het natuurlijk ook eerst zelf gaan proberen, volgens de volgende structuur
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<ul class="tabs">
<li><a href="#1" title="Eerste item">Eerste item</a></li>
<li><a href="#2" title="Eerste item">Eerste item</a></li>
<li><a href="#3" title="Eerste item">Eerste item</a></li>
</ul>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>


Of kijk ff op http://www.degraafschap.nl/ . Daar is dit ook zo toegepast.
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
 
Peter  paul

peter paul

07/12/2008 10:00:00
Quote Anchor link
Ik heb helaas nog geen flauw idee hoe de query werkt en hoe ik hem moet veranderen om tot de oplossing te komen, dus ik hoop hier wat hulp bij te krijgen.
 
Peter  paul

peter paul

10/12/2008 09:24:00
Quote Anchor link
ik zet hem maar weer eens boven in de lijst.
 
Dennis Mertens

Dennis Mertens

10/12/2008 09:35:00
Quote Anchor link
Je gebruikt jQuery, en om dit goed te laten lopen zet je al het javascript in een document ready.

Dus alles binnen de <script> </script> tag.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
$(document).ready(function() {

// Hier je javascript code

#
});


Zie: http://snipplr.com/view/3739/jquery-showhide/
Als voorbeeld.

En hier nog een mooie tab:
http://docs.jquery.com/UI/Tabs

De code
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
  <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js"></script>


  <script>
  $(document).ready(function(){
    $("#example > ul").tabs();
  });
  </script>
  
</head>
<body>
  
        <div id="example" class="flora">
            <ul>

                <li><a href="#fragment-1"><span>One</span></a></li>
                <li><a href="#fragment-2"><span>Two</span></a></li>
                <li><a href="#fragment-3"><span>Three</span></a></li>
            </ul>
            <div id="fragment-1">
                <p>First tab is active by default:</p>
                <pre><code>$('#example > ul').tabs();</code></pre>
            </div>
            <div id="fragment-2">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-3">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>
</body>
</html>

Je ziet 3 links:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
                <li><a href="#fragment-1"><span>One</span></a></li>
                <li><a href="#fragment-2"><span>Two</span></a></li>
                <li><a href="#fragment-3"><span>Three</span></a></li>

In de href staat de locatie. Deze locatie (achter de #) wordt de div's die daaronder staan bedoelt.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div id="fragment-1">

Gewoon dezelfde naam. Makkelijker kan niet.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.