[英]Jquery help with left tab menu
这确实不应该那么复杂,但无法弄清楚。
正文内容部分的左侧垂直有几个选项卡。
在页面加载时,“ leftKanji” css = display:none。 当鼠标进入链接或“ leftTab”类时想要,然后“ leftKanji” css = disply:block
当前,所有“ leftKanji”都显示或隐藏,而不是鼠标悬停的那个。 如果我可以为其添加“慢速”或动画效果,它将是一个奖励。
HTML:
<script type="text/javascript" >
$(document).ready(function(){
$('.leftTab').hover( function(){
$(".leftKanji").css('display', 'block');
},
function(){
$(".leftKanji").css('display', 'none');
});
});
</script>
<div class="mainTabSection">
<a href="#" class="leftTab">
<div class="mainTab"><img src="../" /></div>
<div class="leftKanji"><img src="../" /></div>
</a>
</div>
<div class="mainTabSection">
<a href="#" class="leftTab">
<div class="mainTab"><img src="../" /></div>
<div class="leftKanji"><img src="../" /></div>
</a>
</div>
$(document).ready(function(){
$(".leftKanji").css('display', 'none');
$('.leftTab').hover( function(){
$(".leftKanji").fadeIn('slow');
},function(){
$(".leftKanji").fadeOut('slow');
});
});
当您说$('。leftKanji')时,您引用该类的所有元素。 下面的代码将获取.leftTab元素的子元素。 您可以将.children()更改为jQuery API中的遍历选择器中的任何一个,但我以其中一个为例。 但是重要的是使用$(this),因为它与被悬停的元素相对应。
$(document).ready(function(){
$('.leftTab').hover( function(){
$(this).children(.leftKanji').css('display', 'block');
},
function(){
$(this).children(.leftKanji').css('display', 'none');
});
});
您可能还可以执行以下操作:
$('.leftKanji', $(this)).css('display', 'block')
要么
$('.leftKanji', this).css('display', 'block')
尽管我现在不记得确切的语法。
要么
$(document).ready(function() {
$(".leftKanji").hide();
$('.leftTab').hover( function(){
$(".leftKanji").hide();
$(this).children().next(".leftKanji").show();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.