I'm also surprised by the method you're using to keep the selected link. I would do this instead :
$("a.tabs-link").click(function() {
var link = this;
$(".activetab").fadeOut(1000, function() {
});$(".activetab").fadeOut(1000, function() {
$(this).fadeIn(1000).addClass("activetab")
}).removeClass("activetab");Michel Belleville
2009/11/29 ghostrunner <post@rasmusa.dk>
Hey.
I switch betweem three div by clicking on three different link. See
code below.
I use fadein and fadeout to switch between the divs.
The first time i click on one of the links after the pages is loadet
the current div just disappears. It doesn't fadeout.
The second time and everytime after that fadeout works fine. What am i
doing wrong? have tried in both firefox an Internet explorer.
Code:
----HTML----
<!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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/
general.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-
ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
</head>
<body>
<ul class="tabs-nav">
<li><a href="javascript:;" class="tabs-link">Mod1</a></li>
<li><a href="javascript:;" class="tabs-link">Mod2</a></li>
<li><a href="javascript:;" class="tabs-link">Mod3</a></li>
</ul>
<div class="abv-content activetab">
Mod1 Mod1 Mod1 Mod1 Mod1 Mod1 Mod1 Mod1
</div>
<div class="abv-content">
Mod2 Mod2 Mod2 Mod2 Mod2 Mod2 Mod2 Mod2
</div>
<div class="abv-content">
Mod3 Mod3 Mod3 Mod3 Mod3 Mod3 Mod3 Mod3
</div>
</body>
</html>
----CSS----
.abv-content {
display:none;
border: 2px dotted black;
z-index: 50;
margin-left: 200px;
height: 500px;
}
.abv-content.activetab {
display:block;
border: 2px dotted black;
z-index: 50;
margin-left: 200px;
height: 500px;
}
.tabs-nav {
position: absolute;
top: 20px;
left: 20px;
border: 2px solid black;
width: 100px;
margin: 10px 10px 0px 10px;
padding: 2px 0px 5px 10px;
-moz-border-radius: 10px;
list-style-type: none;
z-index: 100;
background-color: green;
}
---Jquery---
$(document).ready(function() {
$("a.tabs-link").click(function() {
var linkIndex=$("a.tabs-link").index(this)
$(".activetab").fadeOut(1000, function() {
$(".abv-content").eq(linkIndex).fadeIn(1000).addClass("activetab")
}).removeClass("activetab");
});
});
No comments:
Post a Comment