gpt4 book ai didi

jquery - 使用 jQuery 动态显示内容

转载 作者:太空宇宙 更新时间:2023-11-04 00:05:56 26 4
gpt4 key购买 nike

我有一个有序的链接列表,我想在单击时在其下方显示其内容,然后在单击其他链接时折叠。这是我到目前为止所做的。显示有异常。 jsfiddle

<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>

最佳答案

这是解决方案:

<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>

关于jquery - 使用 jQuery 动态显示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14875293/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com