Question

jquery li点击时添加class,并且显示对应的div，隐藏其他的div，我下面的方法太麻烦了

$(".action li").click(function () {
var index = $('.action li').index(this);
var i = index + 1;
$(".action li").removeClass('active');
$(".action li")
if(i == 1)
{
$('#action1').show();
$('#action2').hide();
$('#action3').hide();
}
if(i == 2)
{
$('#action2').show();
$('#action1').hide();
$('#action3').hide();
}
if(i == 3)
{
$('#action3').show();
$('#action2').hide();
$('#action1').hide();
}
});





Answer 1

貌似上次见到这个问题，还是你问的？

$("ul li").click(function(){
var index = $("ul li").index($(this)); //你那个错了

$("div[id^='action']").hide(); //让id以action开关的div隐藏
$("#action"+(index+1)).show(); //让#actionX显示

});

追问

显示隐藏的不是li，是div

追答

^= 选择器有点慢，最好把 action1, action2, action3都放到一个这种。

然后在你的$("ul li").click(function(){
var index = $("ul li").index($(this)),

$divList = $("#actionList").children("div");
$divList.hide();
$divList.eq(index).show();
});