你可能会告诉我今天正在学习jQuery(以及其他网络内容)。

当我的变量I匹配LI中的A上的HREF的内容时,我试图整齐地将LI的类更改为活动。

它的结构如下:

<li><a href="foo.html">Foo</a></li>

当我的“page”变量等于“foo.html”时,我想将li的类更改为active。 如下:

<li class="active"><a href="foo.html">Foo</a></li>

我知道有一种适度的简单方法,但我这样做的方式似乎完全错了!

正如旁注,值得记住(因为这是我已经失败的地方),这是一个菜单,并且有很多LI,例如:

<li class="active"><a href="foo.html">Foo</a></li>
<li><a href="bar.html">Bar</a></li>

非常感谢,克里斯

===============>>#1 票数:5 已采纳

这应该工作:

$('a[href="foo.html"]').closest("li").addClass("active");

要使用页面变量:

$('a[href="' + hrefVariable + '"]').closest("li").addClass("active");

编辑:

解释这是如何工作的:

  • 第一部分$('a [href =“foo.html”]')将找到页面上的任何和所有链接,其href值为foo.html。
  • 第二个对象.closest(“li”)将从第一部分中找到的元素中找到最接近的li。
  • 第三个对象将类添加到前一个元素,在本例中为li。

===============>>#2 票数:2

第1步:获取正确的链接元素

首先,您需要找到正确a标记元素,您可以使用以下属性选择器执行此操作

var href = "foo.html";
var a = $("[href='" + href + "']");

第2步:获取父列表项元素

然后你可以使用parent()函数找到直接父级:

var li = a.parent();

如果它不是直接父级,则可以使用closest()函数,该函数将允许您查找与提供的选择器匹配的第一个祖先。 例如:

var li = a.closest("li");

第3步:改变课程

最后,您可以使用addClass()函数向任何给定元素添加一个类:

li.addClass("active");

如果您需要在任何时候删除该类,或删除现有的类,您可以使用removeClass()函数:

li.removeClass("active");

注意:如果要“重置”所有活动列表元素,可以轻松执行以下操作:

$("li.active").removeClass("active");

最终的结果

这是一个有效的实例

===============>>#3 票数:0

虽然您没有在问题中指定它,但我假设您要从其他LI中删除活动类?

var li = $('.menuClass li'), // menuClass is whatever the class of your menu is (or #menuId for id)
    page = 'foo.html';

li.each(function () {
    var t = $(this); // better performance
    t.removeClass('active'); // remove active class from all
    if (t.find('a').attr('href') === page) { // if the href equals the value of your page variable, add active class
        t.addClass('active');
    }
});

  ask by Kris Douglas translate from so

未解决问题?本站智能推荐:

4回复

使用jQuery切换href / attribute值

我试图在点击时切换元素的href值。 这是我到目前为止的内容: 而我的HTML: 但点击后似乎没有更新。 非常感谢您的帮助。
2回复

jQuery切换不切换

我的页面上有很多伪造的下拉菜单,它们的编码如下(我无法真正更改HTML): 当我单击calcdropdown DIV内的任何链接时,我需要切换相应的选择框UL。 当我使用toggle()时,选择框UL在我第一次单击链接时出现,但是在再次单击链接时并没有消失。 这不起作用,或者:
1回复

jQuery - 切换父元素的类?

我有一些列表元素,如下所示: 而我正试图弄清楚如何使它,以便当您单击类.toggle的链接时,父元素(li元素)将切换类.current。 我不确定以下代码是否正确,但它不起作用。 即使我删除“('.item')”,它似乎没有任何区别。 那么,有什么想法吗? 提
1回复

如何使用jquery更改li中的href类?

我是jquery的新手。 我确实阅读了一些针对li的方法,但没有得到如何在li里面定位href来改变所选菜单的类。 代码如下: 我正在使用的脚本是
3回复

在jQuery中切换li

我有以下清单: ul和li都是动态创建的。 现在,如果我单击一个li,则子li应该切换。 我正在尝试以下代码,但无法正常工作: 如何解决这个问题? 更新: http : //jsfiddle.net/srimanta12/F4apy/
2回复

jQuery-组li元素并创建可切换的隐藏秀ul

我的某些页面上有一个<ul>其中有一堆<li> ,我试图弄清楚如何使用jquery将它们分组并创建可点击的隐藏式UL,因此我的页面没有很大的滚动。 我的UL看起来像这样 我正在尝试按类别(颜色)和属性(绿色)对它们进行分组,因此我的页面中将包含以下内容:
2回复

在jQuery中切换元素类?

我一直对此代码有问题 这里演示此代码仅适用于鼠标悬停,鼠标按下, 而不适用于鼠标松开。 当我取消注释$(this).removeClass().addClass('open'); mousedown事件也会停止触发。 有人知道可能是什么问题吗?
2回复

通过单击列表项的独立div的jQuery切换

我想展示一个水平项目列表,每个项目都通过一个“ id”连接到一个独立的div。 我希望连接到该项目的div切换到渐变。 默认为隐藏所有div。 然后,当用户单击另一个项目时,先前打开的div将关闭。 这是html: 我有以下可有效切换div的jQuery代码,但所有这些代码,
1回复

jQuery-切换所选项目

我对jQuery任务有疑问。 单击标题后,我必须切换“ ol”上下文: 我的html: 我的jQuery脚本: 我的代码在h3标头之间切换了所有上下文,但是我只需要'ol'。 非常感谢您的帮助。
1回复

切换课程会禁用我的链接

我有这个jQuery的: 我的.button链接的html是: 我的CSS禁用类: 为什么单击按钮后我无法进入/ users / sign_up? .disable类已添加且可以正常工作,但未采用链接。