ACP*_*ACP 4 html jquery effects
我有四个div所有设置display:none和文件.我正在显示第一个div ..我有4个链接按钮link1,link2 ... link4 ...我在link1上显示div1点击等等..如何找到哪个div目前在jquery中可见？
<style type="text/css">
.ContentDivs
{
width: 90%;
height: 300px;
border: solid 5px #404040;
display:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<a id="Link1" href="#">Link1</a>
<a id="Link2" href="#">Link2</a>
<a id="Link3" href="#">Link3</a>
<a id="Link4" href="#">Link4</a>
</div>
<div id="div1" class="ContentDivs">
DIv1
</div>
<div id="div2" class="ContentDivs">
Div2
</div>
<div id="div3" class="ContentDivs">
Div3
</div>
<div id="div4" class="ContentDivs">
Div4
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#div1").show().fadeIn("slow");
});
$('#Link1').click(function() {
$(".ContentDivs").fadeOut("fast");//find current div here?
$("#div1").show().fadeIn("slow");
});
$('#Link2').click(function() {
$(".ContentDivs").fadeOut("fast");//find current div here?
$("#div2").show().fadeIn("slow");
});
$('#Link3').click(function() {
$(".ContentDivs").fadeOut("fast");//find current div here?
$("#div3").show().fadeIn("slow");
});
$('#Link4').click(function() {
$(".ContentDivs").fadeOut("fast");//find current div here?
$("#div4").show().fadeIn("slow");
});
</script>
用较小的代码,你可以这样做...
<script type="text/javascript">
$(document).ready(function() {
$("#div1").show().fadeIn("slow");
});
$('.links a').click(function() {
$(".ContentDivs:visible").fadeOut("fast");//find current div here?
$("#div" + ($(this).index()+1)).show().fadeIn("slow");
});
</script>
<div>
<div class="links">
<a id="Link1" href="#">Link1</a>
<a id="Link2" href="#">Link2</a>
<a id="Link3" href="#">Link3</a>
<a id="Link4" href="#">Link4</a>
</div>
<div id="div1" class="ContentDivs">
DIv1
</div>
<div id="div2" class="ContentDivs">
Div2
</div>
<div id="div3" class="ContentDivs">
Div3
</div>
<div id="div4" class="ContentDivs">
Div4
</div>
</div>