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

【问题标题】：Add an ID to clicked links but remove it from others为点击的链接添加一个 ID，但将其从其他链接中删除
【发布时间】：2013-03-14 19:13:23
【问题描述】：

我希望有人可以帮助我解决这个问题。我页面上的 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>

【问题讨论】：

首先，你应该使用类来做到这一点，而不是 id。
每个元素不能有多个 id。

标签： jquery hyperlink add

【解决方案1】：

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

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

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

【讨论】：

我了解将“当前”作为一个类...但是，除非我将#tab 添加到 css，否则该类将不适用于
。我无法让它工作，并尝试了各种不同的方法来尝试遍历 DOM 来完成此操作。我很迷茫。这是我的代码......我可以尝试的任何其他提示将不胜感激。 jsfiddle.net/squirc77/2VszF

我不太了解您需要什么。您是否检查了我的小提琴以获取其余代码？一件重要的事情是：javascript 的 .click 部分应该继续 document.ready。请稍微解释一下您希望此选项卡做什么。

检查此版本，使用 Jquery UI 为选项卡供电：jsfiddle.net/madaaah/hX4hE/22

madaaah - 我需要使用我在 jsfiddle 示例中的 css 样式。这些选项卡正在站点的另一个区域（我接管）中使用，我希望它们在选项卡/面板 jquery 结构中工作。 'current' 类重新定位两个精灵图像，一个到标记，另一个到标记，以使活动选项卡具有不同的颜色。因此，我正在尝试使用 click 事件将“当前”类添加到 a 标签的父 li，同时将其从其他选项卡中删除，一次只创建一个活动选项卡。所以我现有的结构不能改变。希望这有助于更有意义。