点击时交换一个 <li> 的类答案

【问题标题】：Swap a class of an <li> on click点击时交换一个 <li> 的类
【发布时间】：2009-12-10 16:49:12
【问题描述】：

我正在尝试将所选类从一个选项卡切换到另一个选项卡以显示哪个是当前的

$("li.selected").idTabs(function(id,list,set){ 
$("a",set).removeClass("selected") 
.filter("[@href='"+id+"']",set).addClass("selected"); 
for(i in list) 
  $(list[i]).hide(); 
$(id).fadeIn(); 
return false; 
});

所以点击我试图删除并加载选定的类，但没有运气，试试这个

<ul class="idTabs">
  <li class="selected"><a href="#request-info">Request more information</a></li>
  <li><a href="#test-drive">Request a test drive</a></li>
  <li><a href="#make-offer">Make an offer</a></li>
  <li><a href="#get-quote">Get a quote</a></li>
</ul>

$('.idTabs li').click(function(){
$('.idTabs li').removeClass('selected');
  $(this).addClass('selected');
  return false;
});

【问题讨论】：

需要更多信息...您有什么问题？

标签： javascript jquery css class

【解决方案1】：

Aaron，您的第二个示例似乎应该有效，但由于某种原因仅适用于前两个列表项。我在 li 中添加了类以使选择器更加具体，现在它可以正常工作了。

<ul class="idTabs">
    <li class="navTab selected"><a href="#request-info">Request more information</a></li>
    <li class="navTab"><a href="#test-drive">Request a test drive</a></li>
    <li class="navTab"><a href="#make-offer">Make an offer</a></li>
    <li class="navTab"><a href="#get-quote">Get a quote</a></li>
</ul>

$('.navTab').click(function(){
    $('.navTab').removeClass('selected');
    $(this).addClass('selected');
    return false;
});

关于您在下面的评论：

每次单击 li 时它都起作用...单击锚文本时不起作用，因为单击处理程序未附加到该锚文本上。您应该添加“显示：块；”到您的 li 内的锚点以将单击区域扩展到整个 li（您需要从 li 中删除填充，然后填充您的“a”，以便整个 li 是可点击的）。然后...将点击处理程序移动到锚点并让它更改父级的（li）类。我认为它应该是这样的（我现在无法测试它）：

$('.navTab a').click(function(){
    $('.navTab').removeClass('selected');
    $(this).parent().addClass('selected');
    return false;
});

【讨论】：

它很奇怪它间歇性地工作？？？ dev.dealercontrol.net/dealercontrol/contact-vehicle.php
每次单击 li 时它都会起作用...单击锚文本时不起作用，因为单击处理程序未附加到该锚文本上。您应该添加“显示：块；”到您的 li 内的锚点，将点击区域扩展到整个 li。然后...将点击处理程序移动到锚点并让它更改父级的（li）类。我认为它应该是这样的（我现在无法测试它）： $('.navTab a').click(function(){ $('.navTab').removeClass(' selected'); $(this).parent().addClass('selected'); return false; });

【解决方案2】：

给你所有的标签一个像'tab'这样的类，然后尝试一些类似的东西：

$('li.tab').click(function(){
  $('.tab').removeClass('slected');
  $(this).addClass('selected');
  return false;
});

【讨论】：

我像上面的代码一样尝试过，但我认为因为它们是锚标签，所以它搞砸了......

【解决方案3】：

您还没有真正说出问题所在，但我猜您的选择器不太正确。您似乎将“set”类作为第二个参数传递，而不是作为选择器字符串的一部分。

试试：

  $("a," + set).removeClass("selected")

和

   .filter("[@href='"+id+"']" + set)

【讨论】：