--- title: "Enkel tabb/flik funktion" type: "forum-thread" url: "https://www.webforum.nu/amne/javascript/153319-enkel-tabb-flik-funktion" topic: "JavaScript" topic_url: "https://www.webforum.nu/amne/javascript" author: "KoTTeN" published: "2006-11-02T20:25:25.000Z" updated: "2006-11-13T21:49:21.000Z" replies: 6 views: 678 page: 1 pages: 1 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/153319-enkel-tabb-flik-funktion" --- # Enkel tabb/flik funktion ## #1 — KoTTeN, 2006-11-02T20:25Z Hej! Har sökt men inte funnit något svar. Är ute efter en tabb- flikfunktion. Inget lull-lull utan ett enkelt fliksystem. Exakt som Fyndbörsen har: Försökt förstå mig på deras script, men den känns något för inbakad i sidan. Tack på förhand! Permalänk: https://www.webforum.nu/p/153319 ## #2 — KoTTeN, 2006-11-04T11:09Z ingen? Permalänk: https://www.webforum.nu/p/1892811 ## #3 — Calippo, 2006-11-04T17:24Z tabstrip.html ``` TabStrip
Tab 1 Tab 2 Tab 3 Tab 4 Tab 5
``` tabstrip.css ``` body { background: buttonface; border: 0; } .tab-table { background: transparent; border: 0; font: menu; } .tab-button { width: 70; height: 20; background: buttonface; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; cursor: hand; padding-top: 2px;} .tab-button2 { width: 70; height: 20; background: buttonface; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; cursor: hand; color: blue; padding-top: 2px; } .tab-button3 { width: 70; height: 20; background: buttonface; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonface; border-right: 1px solid buttonshadow; cursor: hand; color: blue; } .tab-button4 { width: 70; height: 20; background: buttonface; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonface; border-right: 1px solid buttonshadow; cursor: hand; } .tab-body { background: buttonface; border-top: 0px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; padding: 10;} ``` tabstrip.js ``` /* ______________________________________________________ /¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯\ | TabStrip 1.1 by EAE | | | | Feel free to copy, use and change this script as | | long as this part remains unchanged. | | | | If you have any questions and or comments please | | E-mail me 'eae@eae.net'. If you're looking for | | more JavaScripts etc, please check out my webpage | | 'webfx.eae.net' | | | | Created: October 18, 1998 | | Last Updated: August 13, 2000 | \______________________________________________________/ ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ */ document.onmouseover = TabOver; document.onmouseout = TabOut; document.onmousedown = TabDown; document.onmouseup = TabUp; var eOld = null; function TabOver() { var eSrc = window.event.srcElement; if (eSrc.className == "tab-button") { eSrc.className = "tab-button2"; } if (eSrc.className == "tab-button4") { eSrc.className = "tab-button3"; } } function TabOut() { var eSrc = window.event.srcElement; if (eSrc.className == "tab-button2") { eSrc.className = "tab-button"; } if (eSrc.className == "tab-button3") { eSrc.className = "tab-button4"; } } function TabDown() { var eSrc = window.event.srcElement; if (eSrc.className == "tab-button2") { eSrc.className = "tab-button3"; } } function TabUp() { var eSrc = window.event.srcElement; if (eSrc.className == "tab-button3") { if (eOld != null) { eOld.className = "tab-button"; var eTxt2 = eval("txt" + eOld.id) eTxt2.style.display = "none"; } eOld = eSrc; var eTxt = eval("txt" + eSrc.id) eSrc.className = "tab-button3"; eTxt.style.display = ""; } } function setActiveTab(eSrc) { eOld = eSrc; eOld.className = "tab-button4" var eTxt = eval("txt" + eOld.id) eTxt.style.display = ""; } ``` Permalänk: https://www.webforum.nu/p/1892892 ## #4 — KoTTeN, 2006-11-05T11:01Z Underbart! Ska testa inom kort! Permalänk: https://www.webforum.nu/p/1892983 ## #5 — KoTTeN, 2006-11-11T16:20Z Funkar bra det där! Men, en följdfråga. Som det är nu är ingen flik markerad när sidan laddas. Något jag skulle ha. Någon som har ett tips på hur man går till väga för det? Permalänk: https://www.webforum.nu/p/1894979 ## #6 — Peter S, 2006-11-12T10:35Z Vad menar du med markering? Skall flikens rubrik/bakgrund vara i en färg eller vill du bara kunna välja vilken flik som skall visas initialt? Permalänk: https://www.webforum.nu/p/1895119 ## #7 — KoTTeN, 2006-11-13T21:49Z Ja, kunna välja en flik som ska visas initialt, visas som default när sidan laddas. Permalänk: https://www.webforum.nu/p/1895731 --- Tråden på webben: https://www.webforum.nu/amne/javascript/153319-enkel-tabb-flik-funktion