Linke til en fane lavet med css og jQuery
Jeg har fundet nedenstående måde at lave faneblade. Det er vældig smart, men jeg vil gerne modificere det en lille smule, så jeg har mulighed for at linke direkte til en fane og indholdet her. Nogen løsningsforslag?Koden er:
__________________________________________________
<!doctype html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.6.4.min.js"></script>
<style>
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
position: absolute;
padding: 20px;
font-size: 1.2em;
clear: both;
}
</style>
</head>
<html>
<body>
<ul class="tabs">
<li><a href="#tab1">Beskrivelse</a></li>
<li><a href="#tab2">Kort</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
indehold tab 1<br /><br />
bla bla bla
<!--Content-->
</div>
<div id="tab2" class="tab_content">
indehold tab 2<br /><br />
bla bla bla
<!--Content-->
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>
</body>
</html>
__________________________________
På forhånd tak :-)
/Plaf
