Question

用jquery做了一个选项卡，目前就是点击选项卡不能去除原来的类，也不能在点击的选项卡上添加current

div代码：
<ul id="tabnav">
<li id="top-1"> <a href="#" class="">Home</a></li>
<li id="top-2"><a href="#" class="current">Web Dev</a></li>
<li id="top-3"><a href="#" class=" ">Web Design</a></li>
<li id="top-4"><a href="#" class=" ">Map</a></li>
</ul>
<div id="content">
<ul class="list" id="list-1" style="opacity:0; display:none;">
<li>1、集团新闻</li>
<li>2、政治时事</li>
<li>3、最新活动</li>
<li>4、地图</li>
</ul>
<ul class="list" id="list-2" style="opacity:1; display:block;">
<li>1、集团新</li>
<li>2、政治时</li>
<li>3、最新活</li>
<li>4、地图</li>
</ul>
<ul class="list" id="list-3" style="opacity:0; display:none;">
<li>1、集团</li>
<li>2、政治</li>
<li>3、最新</li>
<li>4、地图</li>
</ul>
<ul class="list" id="list-4" style="opacity:0; display:none;">
<li>1、闻</li>
<li>2、事</li>
<li>3、动</li>
<li>4、地图</li>
</ul>
</div>
jquery代码:

$(document).ready(function(){
$('#tabnav > li').click(function(){
var c = $("ul#tabnav li");//
var index = c.index(this)+1;
var d="top-"+index;
var f="list-"+index;
$('#'+d).addClass("current").siblings().removeClass("current");
$('#'+f).animate({opacity:1},800).show().siblings().animate({opacity:0},100).hide();

});
})

Answer 1

感觉你好像加错地方了？
你到底是要在li上加class还是在li里面的a里加class？

如果li上加，请把<li id="top-2"><a href="#" class="current">Web Dev</a></li>的a标签里的去掉
如果a上加
修改$('#'+d).addClass("current").siblings().removeClass("current");为
$('#'+d).find(">a").addClass("current").end().siblings().find(">a").removeClass("current");

Answer 2

你的代码没有问题啊，只是写得过于繁琐了，你完全可以这样：
$(document).ready(function(){
$('#tabnav > li').click(function(){
var index = $(this).prevAll("li").length+1;
$(this).addClass("current").siblings().removeClass("current");
$('#list-'+index).animate({opacity:1},800).show().siblings().animate({opacity:0},100).hide();
});
})