Question

我在向导航（Home）中的第一个锚添加“active”类时遇到问题。

这是我的代码 - http://codepen.io/Kuzyo/pen/vbhDF

这是我的 jQuery ：

$(document).ready(function() {
    var homeLink = $(".nav a")[0];
    console.log(homeLink);  
    homeLink.addClass("active");
    $("#home").addClass("center");  
});

这是我的 HTML ：

的（与问题部分相关）

<div class="header">
    <div class="holder clearfix">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#creature">Creature</a></li>
            <li><a href="#landscape">Landscape</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</div>

谁能看到我做错了什么？

Answer 1

更改

var homeLink = $(".nav a")[0];

要：

var homeLink = $(".nav a").first();

在这种情况下，您会想要.first()，但如果您决定定位该分组中的其他锚点，请使用.eq()。

您试图在JavaScript对象上使用jQuery方法，因此出现控制台错误：

＆＃34;对象[对象HTMLAnchorElement]没有方法＆＃39; addClass＆＃39;＆＃34;

Codepen here.

Answer 2

$(".nav a")[0]返回DOM元素而不是jQuery对象您应该使用.first()代替

Answer 3

var homeLink = $("ul.nav li a").first();

Answer 4

你可以这样做，而不是向DOM元素添加一个类，试试这个：

var homeLink = $(".nav a:eq(0)");

参考：:eq() Selector

Answer 5

如果要通过索引选择like，请使用jQuery .eq()而不是括号，否则会丢失jQuery引用（并且不能使用addClass之类的jquery函数：

var homeLink = $(".nav a").eq(0);

您也可以使用.first()，但如果您想选择第二个或第三个，则需要.eq()

此外，如果您想要href选择，那就是：

$('a[href="#home"]').addClass('active');

Answer 6

它有几个选项

var homeLink = $(".nav a")[0];  // Get first DOM element, no jquery Object

/* Add jquery function */
$(homeLink).addClass("active");
    $("#home").addClass("center");

或更好的方式

var homeLink = $(".nav a").first();   // Get jquery Object

或

var homeLink = $(".nav a").eq(0);      // Cero position is first element

Answer 7

你应该用这个：

var homeLink = $(".nav a:first");

锚点上不能使用addClass吗？

7 个答案: