jquery多选项卡效果实例代码(附效果图)_jquery

$(".designerspanel li").click(function(){
idname=$(this).parents('.designerspanel').attr('id');
current=$("#"+idname+" li:eq(0)").attr('class');
current=current.replace("black","");
$("#"+idname+" li").addClass("black");
$(this).removeClass("black").addClass(current);
$("#"+idname+" #show").hide();
$("#"+idname+" #show").eq($("#"+idname+" li").index(this)).show();
}).css("cursor", "pointer");
})

附上html代码

代码如下:


Designer Name Order A to G

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

Designer Name Order H to N

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

Designer Name Order O to T

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

Designer Name Order U to Z

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

{$i.user_name}

页面效果：

页面比较杂乱，你可以看到很多选项卡，而且有多个选项卡，点击每个选项，内容发生变化，而且颜色也改变。