Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Tabbladen op website

None
9 antwoorden
  • Hallo,

    Ik kwam recentelijk terecht op de website van Thickbox (http://jquery.com/demo/thickbox/) en ik was erg gecharmeerd van de tabbladen (tweede grijze blok, maar ook meerdere blokken eronder).

    Hoe wordt zoiets gemaakt? Is het een script of gewoon een combinatie van html/css/php?

    Ik wil het zelf ook graag toevoegen op mijn eigen website.

    Willem
  • Wat denk je, waar die site reclame voor maakt?
  • Ik wil je wel een beetje opweg helpen – css moet je zelf maar toepassen :wink:

    [code:1:2205a0bb54]
    <!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>
    <script>
    function veranderTab(x,tekst) {
    document.getElementById('1').className = 'uit';
    document.getElementById('2').className = 'uit';
    document.getElementById('3').className = 'uit';
    document.getElementById(x).className='aan';
    document.getElementById('content').innerHTML=tekst;
    }
    </script>
    <style>
    a.aan {
    background-color:#000000;
    color:#FFFFFF;
    padding:5px;
    }
    a.uit {
    background-color:#CCCCCC;
    color:#000000;
    padding:5px;
    }
    #content {
    padding:5px;
    width:400px;
    border:1px solid #666666;
    background-color:#EAEAEA;
    }
    </style>
    </head>

    <body>


    <a href="#" onclick="veranderTab('1','inhoud van tab 1')" class="aan" id="1">Tab 1</a> <a href="#" onclick="veranderTab('2','inhoud van tab 2')" class="uit" id="2">Tab 2</a> <a href="#" onclick="veranderTab('3','inhoud van tab 3')" class="uit" id="3">Tab 3</a><br />
    <div id="content">Standaardcontent</div>
    </body>
    </html>
    [/code:1:2205a0bb54]
    Niet getest, zal ook een tikkie slordig zijn, maar dit is een voorbeeldje. Niet moeilijk dus, en gewoon javascript
    Daarnaast zou je eventueel nog een Ajax request erin kunnen verwerken.
    [quote:2205a0bb54="Frison"]Wat denk je, waar die site reclame voor maakt?[/quote:2205a0bb54]
    Idd, ze bieden het script gewoon gratis aan hoor.. Anders kan je dat gewoon gebruiken. In dat geval is het inderdaad een combinatie van Ajax (waarschijnlijk icm php) en als je dat noemenswaardig vindt, css (lijkt me logisch..)

    //edit: script wat aangepast, het werkte eerst helemaal niet :)
  • Dank je! Ik zal het eens testen.

    Overigens is Thickbox iets anders dan wat ik bedoel met tabbladen. Thickbox is wat je ziet als je op een afbeelding van onder meer www.mijnkopthee.nl klikt.
  • [quote:1fc0e30f1a="carlobernardini"]<a href="#" onclick="veranderTab('1','inhoud van tab 1')" class="aan" id="1">Tab 1</a> <a href="#" onclick="veranderTab('2','inhoud van tab 2')" class="uit" id="2">Tab 2</a> <a href="#" onclick="veranderTab('3','inhoud van tab 3')" class="uit" id="3">Tab 3</a><br />
    <div id="content">Standaardcontent</div>
    </body>
    </html>
    [/quote:1fc0e30f1a]Zou dit ook niet gebruiken, die links leiden nergens naartoe. Links zoals <a href="#"> en <a href="javascript:"> behoren dan ook tot de bad practices.

    Mogelijke oplossing voor de tabs: Accessible , unobtrusive javascript tabs with jQuery.
  • [quote:e939f75f20="boelieboelie"][quote:e939f75f20="carlobernardini"]<a href="#" onclick="veranderTab('1','inhoud van tab 1')" class="aan" id="1">Tab 1</a> <a href="#" onclick="veranderTab('2','inhoud van tab 2')" class="uit" id="2">Tab 2</a> <a href="#" onclick="veranderTab('3','inhoud van tab 3')" class="uit" id="3">Tab 3</a><br />
    <div id="content">Standaardcontent</div>
    </body>
    </html>
    [/quote:e939f75f20]Zou dit ook niet gebruiken, die links leiden nergens naartoe. Links zoals <a href="#"> en <a href="javascript:"> behoren dan ook tot de bad practices.

    Mogelijke oplossing voor de tabs: Accessible , unobtrusive javascript tabs with jQuery.[/quote:e939f75f20]
    Dan maak je dr toch gewoon
    [code:1:e939f75f20]
    <span onclick="(actie)" style="cursor:pointer"></span>
    [/code:1:e939f75f20]
    van, of gebruik divs oid….
  • Dat is volgens mij niet het punt dat boelieboelie probeerde te maken. Het gaat er juist om dat je wél het a-element moet gebruiken, maar dat je dan óók moet zorgen dat de href-eigenschap naar iets verwijst zodat de link werkt in browsers die geen javascript ondersteunen.

    - Bas
  • Bedankt voor de code, carlobernardini! Erg handig! :D
  • Je kunt de tabs ook gewoon grafisch maken en met css laten 'reageren'.
    Kan je dus zelf bepalen hoe ze eruit komen te zien [grafisch dus] en laat je ze met css op elkaar reageren.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.