6 svar · 674 visningar · startad av KoTTeN
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: http://www.fyndborsen.se/ecommerce/produkt_win.php?main!filter!Prodnr=11024
Försökt förstå mig på deras script, men den känns något för inbakad i sidan.
Tack på förhand!
ingen?
tabstrip.html
<html>
<head>
<title>TabStrip</title>
<script language="javascript" src="tabstrip.js"></script>
<link rel="stylesheet" type="text/css" href="tabstrip.css">
</head>
<body>
<table border="0" cellpadding="0" cellspacing="1" width="500" height="200" class="tab-table">
<tr>
<td id="tab1" class="tab-button" align="center">Tab 1</td>
<td id="tab2" class="tab-button" align="center">Tab 2</td>
<td id="tab3" class="tab-button" align="center">Tab 3</td>
<td id="tab4" class="tab-button" align="center">Tab 4</td>
<td id="tab5" class="tab-button" align="center">Tab 5</td>
</tr>
<tr>
<td colspan="5" class="tab-body">
<div id="txttab1" style="display: none;" align="center">
This is Tab 1, you can use <big>html</big> images <img src="../home.gif"> etc.
</div>
<div id="txttab2" style="display: none;" align="center">
This is Tab 2
</div>
<div id="txttab3" style="display: none;" align="center">
This is Tab 3
</div>
<div id="txttab4" style="display: none;" align="center">
This is Tab 4
</div>
<div id="txttab5" style="display: none;" align="center">
This is Tab 5
</div>
</td>
</tr>
</table>
<script>
setActiveTab(document.all.tab1);
</script>
</body>
</html>
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 = "";
}
Underbart! Ska testa inom kort!
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?
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?
Ja, kunna välja en flik som ska visas initialt, visas som default när sidan laddas.