0

我希望有人可以帮助我解决这个问题。我页面上的 jQuery 选项卡正在使用背景图像，我正在尝试将 id="current" 添加到单击的链接（用于活动状态）并希望从其他链接中删除该 ID。我还希望第一个选项卡在页面打开时具有 id。我尝试过的所有内容要么从所有链接中删除 id="current" ，要么将其添加到所有链接中。提前感谢您提供的任何帮助。~c

**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>
4

1 回答 1

1

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

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

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

于 2013-03-14T19:36:42.743 回答