.box {margin: 30px auto; width: 500px; height: 300px;}
.left ,.right {width: 100px; background: #eaeaea;display: inline-block; margin: 0 10px; text-indent: 20px; margin-bottom: 20px;}
.tab_t { border: #ccc solid 1px; font-weight: normal;}
.tab_t a { width:65px; text-align: center; display: inline-block;}
a.tab_t_hover {color: red; background: #eaeaea; font-weight: bold;}
.tab_b {border: #ccc solid 1px; border-top: none; padding: 15px;}
function tab_menu(cssname1,hovercss,cssname2){
$(cssname2 + ":not(:first)").hide();
$(".left").click(function(){
j = $("." + hovercss).index();
if(j>0){
v = j - 1;
}else{
v = 0;
}
$(cssname1).eq(v).addClass(hovercss).siblings().removeClass(hovercss);
$(cssname2).eq(v).fadeIn().siblings(cssname2).hide();
});
$(".right").click(function(){
j = $("." + hovercss).index();
if(j <= $("." + hovercss + ":last").index()){
v = j + 1;
}else{
v = $("." + hovercss + ":last").index();
}
$(cssname1).eq(v).addClass(hovercss).siblings().removeClass(hovercss);
$(cssname2).eq(v).fadeIn().siblings(cssname2).hide();
});
$(cssname1).mouseover(function(){
var i = $(this).index();
$(this).addClass(hovercss).siblings().removeClass(hovercss);
if($(cssname2).eq(i).is(":animated")){
$(cssname2).eq(i).stop(false,true).fadeIn().siblings(cssname2).hide();
}else{
$(cssname2).eq(i).fadeIn().siblings(cssname2).hide();
}
});
}
$(function(){
new tab_menu(".tab_t a","tab_t_hover",".tab_b_list");
})
1581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
