使用jQuery动态显示内容

我有一个链接的有序列表，我想单击时在其下面显示它的内容，然后在单击其他链接时折叠。这就是我迄今为止所做的。显示器有异常。 jsfiddle 使用jQuery动态显示内容

<html> 
<head> 
<title>Jquery Change content of Div</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 

jQuery(document).ready(function(){ 
     var $j = jQuery;  


$j('.biocontent div:not(:first-child)').hide(); 
$j('.services li a').click(function(){ 
    var showclass = $j(this).attr('class'); 
    $j('.biocontent div').fadeOut('fast',function(){ 
     $j('.biocontent div.' + showclass).show(); 
     }); 
}); 
}); 
</script> 
</head> 
<body> 
<ul class="services"> 
<li><a class="div1" href="#"><h2>Div 1</h2></a></li> 
<div class="biocontent "> 
<div class="div1"> 
<p>Content1</p> 
</div> 
</div> 

<li><a class="div2" href="#"><h2>Div 2</h2></a></li> 
<div class="biocontent "> 
<div class="div2"> 
<p>Content 2</p> 
</div> 
</div> 

<li><a class="div3" href="#"><h2>Div 3</h2></a></li> 
<div class="biocontent "> 
<div class="div3"> 
<p>Content 3</p> 
</div> 
</div> 

<li><a class="div4" href="#"><h2>Div 4</h2></a></li> 
<div class="biocontent "> 
<div class="div4"> 
<p>Content 4</p> 
</div> 
</div> 

<li><a class="div5" href="#"><h2>Div 5</h2></a></li> 
<div class="biocontent> 
<div class="div5"> 
Content 5 
</div> 
</div> 
</body> 
</html>

来源

2013-02-14 user1843335

问题是什么？ – 2013-02-14 12:57:22

@JayBlanchard“我想在点击时在它下面显示div内容” – user1843335 2013-02-14 12:59:14

你的HTML被搞砸了，所以我删除额外div.servicescontent并改写了功能切换内容 - http://jsfiddle.net/CCa7K/2/

$('a').click(function() { 
    $(this).parent().next('.servicescontent').toggle(); 
});

来源

2013-02-14 13:05:42

谢谢..我如何添加淡入与js到秒。 – user1843335 2013-02-14 13:09:50

看看这个 - http://jsfiddle.net/CCa7K/3/ – 2013-02-14 13:13:49

非常感谢Jay。最后一件事情..当另一个div被点击时，打开的div不会关闭。我怎么能做到这一点。 – user1843335 2013-02-14 13:42:38

这是解决方案：

<html> 
<head> 
<title>Jquery Change content of Div</title> 
<style> 
.servicescontent div{ 
    display:none; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
jQuery(document).ready(function(){ 
     var $j = jQuery;  

//services page 
$j('.services li a').click(function(){ 
    var showid= $j(this).attr('class'); 
    $j('.servicescontent div').hide(); 
    $('#'+showid).toggle('fast'); 
}); 
}); 
</script> 
</head> 
<body> 
<ul class="services"> 
<li><a class="div1" href="#"><h2>Div 1</h2></a></li> 
<div class="servicescontent"> 
<div id="div1" class="cont"> 
<p>Content1</p> 
</div> 
</div> 

<li><a class="div2" href="#"><h2>Div 2</h2></a></li> 
<div class="servicescontent"> 
<div id="div2" class="cont"> 
<p>Content 2</p> 
</div> 
</div> 

<li><a class="div3" href="#"><h2>Div 3</h2></a></li> 
<div class="servicescontent"> 
<div id="div3" class="cont"> 
<p>Content 3</p> 
</div> 
</div> 

<li><a class="div4" href="#"><h2>Div 4</h2></a></li> 
<div class="servicescontent"> 
<div id="div4" class="cont"> 
<p>Content 4</p> 
</div> 
</div> 

<li><a class="div5" href="#"><h2>Div 5</h2></a></li> 
<div class="servicescontent"> 
<div id="div5" class="cont"> 
Content 5 
</div> 
</div> 
</body> 
</html>

来源

2013-02-14 13:14:11

使用jQuery动态显示内容

回答

相关问题