我正在尝试在点击时替换div。为此,我使用以下脚本
$(function(){
var $containers = $("#center > div").hide();
$('div span a').each(function(i,el){
var idx = i;
$(this).click(function(e){
var $target = $containers.filter(':eq(' + idx + ')');
// Fade out visible div
if($containers.filter(':visible').not($target).length){
$containers.filter(':visible').fadeOut();
}
// Fade in new div if not already showing
$target.not(':visible').fadeIn();
e.preventDefault();
})
})
});
html代码是
<div>
<div>
<span><a href="#">Home</a></span>
<span><a href="#">About us</a></span>
<span><a href="#">Specifications</a></span>
<span><a href="#">Contact us</a></span>
</div>
<div id="center">
<div class="container">
Hey , this is Home div contents
</div>
<div class="container">
Hey , this is About us div contents
</div>
<div class="container">
Hey , this is Specifications div contents
</div>
<div class="container">
Hey , this is Contact us div contents
</div>
</div>
</div>
这里所有的div最初都是隐藏的。我想在点击时显示第一个div和其他div
请帮忙,
由于
答案 0 :(得分:1)
使用 :first 选择器
示例:
$(function(){
var $containers = $("#center > div").hide();
$("#center > div:first").show(); // OR $containers.first().show();
// existing code
});
答案 1 :(得分:1)
替换此
var $containers = $("#center > div").hide();
有了这个
var $containers = $("#center > div").not(':eq(0)').hide();
答案 2 :(得分:1)
1)隐藏除第一个
之外的所有div2)在选项卡上单击,淡出所有div,并淡入与单击的索引对应的那个
$("#center").children().not(':first').hide();
$('div span a').click(function(ev) {
$('#center').children().fadeOut().eq($(this).parent().index()).fadeIn();
ev.preventDefault();
}
答案 3 :(得分:1)
只需替换
var $containers = $("#center > div").hide();
与
var $containers = $("#center > div").not(':first').hide();
答案 4 :(得分:1)
尝试这样
$(function(){
var $containers = $("#center > div").not(':eq(0)').hide();
$('div span a').each(function(i,el){
var idx = i;
$(this).click(function(e){
var $target = $containers.filter(':eq(' + idx + ')');
// Fade out visible div
if($containers.filter(':visible').not($target).length){
$containers.filter(':visible').fadeOut();
}
// Fade in new div if not already showing
$target.not(':visible').fadeIn();
e.preventDefault();
})
})
});
答案 5 :(得分:1)
var $containers = $("#center > div").hide();
$containers.first().show()
$('div span a').click(function(e){
e.preventDefault();
var ind = $(this).parent().index();
$containers.fadeOut().filter(':eq('+ind+')').fadeIn()
})