如何解决jq制作2级选项卡的bug

lz最近项目中遇到个2级选项卡,刚开始说做就做 把最下面的选项卡给做出了了,然后在点击最上面的选项卡切换不就好了嘛

可是在我粘贴复制的时候出大事了。点击最上面的第二个切换卡时乱了, 不说了 上jq代码

$('.style_nav_li1').click(function(){
$('.style_one').css('display','block')
$('.style_two').css('display','none')
$('.style_three').css('display','none')
$('.style_four').css('display','none')
})
$('.style_nav_li2').click(function(){
$('.style_one').css('display','none')
$('.style_two').css('display','block')
$('.style_three').css('display','none')
$('.style_four').css('display','none')
})
$('.style_nav_li3').click(function(){
$('.style_one').css('display','none')
$('.style_two').css('display','none')
$('.style_three').css('display','block')
$('.style_four').css('display','none')
})
$('.style_nav_li4').click(function(){
$('.style_one').css('display','none')
$('.style_two').css('display','none')
$('.style_three').css('display','none')
$('.style_four').css('display','block')
})

// 风格样式
$('.style_nav li').eq(0).children('a').css('color','#23a2fb')
$('.style_nav li').click(function(){
$(this).children('a').css('color','#23a2fb');
$(this).siblings().children('a').css('color','#666666')
var nums=$(this).index();
$('.style_con li').eq(nums).show().siblings().hide();
})
$(window).scroll(function(){
var srctops=$(document).scrollTop();
if(srctops>600){
$('.navigation_bg').addClass('navigation_active');
}else{
$('.navigation_bg').removeClass('navigation_active');
}
})
//// 主卧 客厅 餐厅 的切换效果
$('.big_img li').eq(0).css('display','block');
$('.tag_nav li').eq(0).children('a').css({"background":"#c8a93f","color":"white"});
$('.pic_clearfix').eq(0).css('display','block')
$('.tag_nav li').click(function(){
$(this).children('a').css({"background":"#c8a93f","color":"white"}).parent().siblings().children('a')
.css({'background':'white','color':'#666666'});
var num =$(this).index();
$('.big_img li').eq(num).css('display','block').siblings().css('display','none');

$('.pic_clearfix').eq(num).css('display','block').siblings('.pic_clearfix').css('display','none');
})
// 主卧 客厅 餐厅 的切换效果 2
$('.big_imgs li').eq(0).css('display','block');
$('.tag_navs li').eq(0).children('a').css({"background":"#c8a93f","color":"white"});
$('.pic_clearfixs').eq(0).css('display','block')
$('.tag_navs li').click(function(){
$(this).children('a').css({"background":"#c8a93f","color":"white"}).parent().siblings().children('a')
.css({'background':'white','color':'#666666'});

var num =$(this).index();
$('.big_imgs li').eq(num).css('display','block').siblings().css('display','none');

$('.pic_clearfixs').eq(num).css('display','block').siblings('.pic_clearfixs').css('display','none');
})

//第二个部分
$('.big_img2 li').eq(0).css('display','block');
$('.tag_nav2 li').eq(0).children('a').css({"background":"#c8a93f","color":"white"});
$('.pic_clearfix2').eq(0).css('display','block')
$('.tag_nav2 li').click(function(){
$(this).children('a').css({"background":"#c8a93f","color":"white"}).parent().siblings().children('a')
.css({'background':'white','color':'#666666'});
var num =$(this).index();
$('.big_img2 li').eq(num).css('display','block').siblings().css('display','none');

$('.pic_clearfix2').eq(num).css('display','block').siblings('.pic_clearfix2').css('display','none');
})
// 主卧 客厅 餐厅 的切换效果 2
$('.big_imgs2 li').eq(0).css('display','block');
$('.tag_navs2 li').eq(0).children('a').css({"background":"#c8a93f","color":"white"});
$('.pic_clearfixs2').eq(0).css('display','block')
$('.tag_navs2 li').click(function(){
$(this).children('a').css({"background":"#c8a93f","color":"white"}).parent().siblings().children('a')
.css({'background':'white','color':'#666666'});

var num =$(this).index();
$('.big_imgs2 li').eq(num).css('display','block').siblings().css('display','none');

$('.pic_clearfixs2').eq(num).css('display','block').siblings('.pic_clearfixs2').css('display','none');
})
//第三个部分
$('.big_img3 li').eq(0).css('display','block');
$('.tag_nav3 li').eq(0).children('a').css({"background":"#c8a93f","color":"white"});
$('.pic_clearfix3').eq(0).css('display','block')
$('.tag_nav3 li').click(function(){
$(this).children('a').css({"background":"#c8a93f","color":"white"}).parent().siblings().children('a')
.css({'background':'white','color':'#666666'});
var num =$(this).index();
$('.big_img3 li').eq(num).css('display','block').siblings().css('display','none');

$('.pic_clearfix3').eq(num).css('display','block').siblings('.pic_clearfix3').css('display','none');
})
// 主卧 客厅 餐厅 的切换效果 2
$('.big_imgs3 li').eq(0).css('display','block');
$('.tag_navs3 li').eq(0).children('a').css({"background":"#c8a93f","color":"white"});
$('.pic_clearfixs3').eq(0).css('display','block')
$('.tag_navs3 li').click(function(){
$(this).children('a').css({"background":"#c8a93f","color":"white"}).parent().siblings().children('a')
.css({'background':'white','color':'#666666'});

var num =$(this).index();
$('.big_imgs3 li').eq(num).css('display','block').siblings().css('display','none');

$('.pic_clearfixs3').eq(num).css('display','block').siblings('.pic_clearfixs3').css('display','none');
})
//第四个部分
$('.big_img4 li').eq(0).css('display','block');
$('.tag_nav4 li').eq(0).children('a').css({"background":"#c8a93f","color":"white"});
$('.pic_clearfix4').eq(0).css('display','block')
$('.tag_nav4 li').click(function(){
$(this).children('a').css({"background":"#c8a93f","color":"white"}).parent().siblings().children('a')
.css({'background':'white','color':'#666666'});
var num =$(this).index();
$('.big_img4 li').eq(num).css('display','block').siblings().css('display','none');

$('.pic_clearfix4').eq(num).css('display','block').siblings('.pic_clearfix4').css('display','none');
})
// 主卧 客厅 餐厅 的切换效果 2
$('.big_imgs4 li').eq(0).css('display','block');
$('.tag_navs4 li').eq(0).children('a').css({"background":"#c8a93f","color":"white"});
$('.pic_clearfixs4').eq(0).css('display','block')
$('.tag_navs4 li').click(function(){
$(this).children('a').css({"background":"#c8a93f","color":"white"}).parent().siblings().children('a')
.css({'background':'white','color':'#666666'});

var num =$(this).index();
$('.big_imgs4 li').eq(num).css('display','block').siblings().css('display','none');

$('.pic_clearfixs4').eq(num).css('display','block').siblings('.pic_clearfixs4').css('display','none');
})

 

因为我使用的jq选择器关系好像让他继承了上面的样式,导致他找不到了,所以在一级选选项卡时我给他的4个点击事件给设定了死了,这样他就能找到了。并不会影响下面的选择器。思路就是这样.缺点就是代码熔渣,欢迎高手留意见改进。共同学习!!

posted @ 2017-03-15 11:21  松前月下  阅读(288)  评论(0编辑  收藏  举报