$(function(){ //var li = $(".div_menu:visible li:not(:last)"); var menu_li=$(".div_head li") menu_li.click(function() { $(this).addClass('active_h').siblings().removeClass('active_h'); var menu_index=menu_li.index(this); $(".div1 > div").eq(menu_index).show().siblings().hide(); var li = $(".div_menu:visible li:not(:last)"); li.mouseover(function() { $(this).addClass('active').siblings().removeClass('active');
//var li = $(".div_menu:visible li:not(:last)");
var menu_li=$(".div_head li")
menu_li.click(function() {
$(this).addClass('active_h').siblings().removeClass('active_h');
var menu_index=menu_li.index(this);
$(".div1 > div").eq(menu_index).show().siblings().hide();
var li = $(".div_menu:visible li:not(:last)");
li.mouseover(function() {
$(this).addClass('active').siblings().removeClass('active');
});
li.mouseout(function() {
$(this).removeClass('active');
});
});
})
这个效果 第一次没有效果的 只有点击了选项卡后才有效果 我把这一段放到外面来
var li = $(".div_menu:visible li:not(:last)");
li.mouseover(function() {
$(this).addClass('active').siblings().removeClass('active');
});
li.mouseout(function() {
$(this).removeClass('active');
});
只有第一个有效果 切换以后其他的div没有效果 这是怎么回事啊
//var li = $(".div_menu:visible li:not(:last)");
var menu_li=$(".div_head li")
menu_li.click(function() { //-(1)--单击div_head中的li
$(this).addClass('active_h').siblings().removeClass('active_h');
var menu_index=menu_li.index(this);
$(".div1 > div").eq(menu_index).show().siblings().hide();
var li = $(".div_menu:visible li:not(:last)");
li.mouseover(function() {//--(2)--给div_menu中的li绑定mouseover事件
$(this).addClass('active').siblings().removeClass('active');
});问题在于div_menu里li的hover事件 只有在单击div_head中的li后才会绑定,也就是说页面初始化的时候 div_menu的所有li都没有绑定mouseover事件 所以就不会有效果。
解决方法:
楼主在自己原来代码上稍修改下即可
原代码:.....
var li=$(".div_menu li:not(:last)");
li.mouseover(function() {
$(this).addClass('active').siblings().removeClass('active');
});
.....修改为:......
var li=$(".div_menu li");//修改选择器
li.mouseover(function() {
if(!$(this).next().length){return false}//新增一句判断
$(this).addClass('active').siblings().removeClass('active');
});
.....