Question

我希望有人可以帮助我。我页面上的jQuery选项卡正在使用背景图像，我正在尝试向点击的链接添加id =“current”（用于活动状态），并希望从其他链接中删除ID。我还希望第一个选项卡在页面打开时具有id。我尝试过的所有内容都会从所有链接中删除id =“current”，或将其添加到所有链接。提前感谢您提供任何帮助。〜ç

**jQuery**
<script type="text/javascript">
$(function(){   
$( "#tabs" ).tabs();

$('#tabs a').click(function(){
$(this).parent().attr('id', 'current');
('li #current').removeAttr('id', 'current');
});

});
</script>



CSS
#tabs a { float:left;background:url(images/tabLeft.png) no-repeat left top;}
#tabs a span { float:left;display:block;background:url(images/tabRight.png) no-repeat  right top;}/*grey bg*/
#tabs #current a { background-position:0% -30px;} /*purple bg*/
#tabs #current a span { background-position:100% -30px;} 

HTML
 <div id="tabs">
 <ul>
 <li id="current"><a href="#tabs-1"><span>Tab 1</span></a></li>
   <li><a href="#tabs-2"><span>Tab 2</span></a></li>
   <li><a href="#tabs-3"><span>Tab 3</span></a></li>
   <li><a href="#tabs-4"><span>Tab 4</span></a></li>
   <li><a href="#tabs-5"><span>Tab 5</span></a></li>
    </ul>

    <div id="tabs-1" >Tab 1 Content</div>
    <div id="tabs-2" >Tab 2 Content</div>
    <div id="tabs-3" >Tab 3 Content</div>
    <div id="tabs-4" >Tab 4 Content</div>
    <div id="tabs-5" >Tab 5 Content</div>

</div>

Answer 1

首先，放弃使用id来做这种事情。我做了一个例子，让你看看如何使用类来操作元素并切换类。

$('.tab li a').click( function(){
$('.tab li a').parent().find('.current').removeClass('current');
$(this).addClass('current');
});

http://jsfiddle.net/madaaah/hX4hE/

为点击的链接添加ID，但将其从其他链接中删除

1 个答案: