Question

我正在尝试编写，我认为是一个简单的jQuery函数来切换选定选项卡与未选中选项卡的外观。这就是我所拥有的：

CSS：

ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
  display: block; 
  float: left; 
  height: 20px;
  padding: 6px 28px 5px 22px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #635B53 url(../images/tab.png) no-repeat 100% 0;}

ul#menu li.selected 
{ margin: 2px 2px 0 0;
  background: #635B53 url(../images/tab_selected.png) no-repeat 0 0;}

HTML：

<ul id="menu">
  <li id="menuHome"><a href="home.html">Home</a></li>
  <li id="menuNews"><a href="news.html">News</a></li>
  <li id="menuDownloads"><a href="downloads.html">Downloads</a></li>
  <li id="menuFeedback"><a href="feedback.html">Feedback</a></li>
  <li id="menuContact"><a href="contact.html">Contact Us</a></li>
</ul>

jQuery的：

$('#menu li a').live ( 'click', function()
{
    $(this).parent().find('a.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});

这是怎么回事：我点击其中一个标签，标签变为更亮的颜色，然后它切换回原来的深灰色。我在FireBug中运行它，它清楚地表明jQuery函数将选项卡更改为浅色，但是当我“继续”，并且程序返回到jQuery库时，它将其切换回原始版本！ p>

我已经尝试了一切我能想到的......一点帮助？！？

更新

即使我们不担心从包装集中删除选定的类并只是专注于添加类，JQ代码仍然执行相同的操作。换句话说，这个：

$('#menu li a').live ( 'click', function()
{
    $(this).parent().addClass('selected');
});

“闪烁”浅色 - 它显示较浅的颜色，然后立即返回到较暗的颜色。哎呀！有人正在改变它......谁？

Answer 1

试试这个：

$('#menu li a').live ('click', function()
{
    $("a",$(this).parents("ul")).removeClass('selected');
    $(this).addClass('selected');
});

Answer 2

问题在于你的jQuery代码。您的第一行使用了.parent()，它只会到达被点击的li元素的a元素。然后，.find()调用会搜索li ...它不会搜索您想要的任何相邻li元素。

您要做的是使用$(this).closest('ul').find('a.selected').removeClass('selected')。您要将“已选择”类添加到a元素的下一行，因此您需要$(this).addClass('selected')（请注意您不需要/想要在此使用.parent()）

Answer 3

试试这个：

$("#menu li > a").click(function() {
    parentLi = $(this).closest("li");
    parentLi.hasClass("selected")?(
        parentLi.removeClass("selected")
    ):(
        parentLi.addClass("selected"),
        parentLi.siblings().removeClass("selected")
    )
});

使用addClass和removeClass手动选项卡

3 个答案: