1

I'm having a problem with adding the class "active" to my first anchor in my nav (Home).

Here is my codepen - http://codepen.io/Kuzyo/pen/vbhDF

Here's my jQuery:

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

Here's the (relevant to the question part of) my 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>

Can anyone see what I'm doing wrong?

4

7 回答 7

4

改变

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

至：

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

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

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

“对象 [object HTMLAnchorElement] 没有方法‘addClass’”

代码笔在这里。

于 2013-07-06T17:45:30.867 回答
3

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

于 2013-07-06T17:45:40.757 回答
2 
var homeLink = $("ul.nav li a").first();
于 2013-07-06T17:46:04.073 回答
2

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

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

参考：:eq() 选择器

于 2013-07-06T17:47:24.967 回答
2

如果你想通过它的索引选择一个like，使用jQuery .eq()而不是括号，否则你会丢失jQuery 引用（并且不能使用jquery 函数，比如addClass：

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

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

此外，如果您想按 选择href，它将是这样的：

$('a[href="#home"]').addClass('active');
于 2013-07-06T17:48:17.350 回答
1

它有几个选项

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
于 2013-07-06T17:51:47.410 回答
0

你应该使用这个： 

var homeLink = $(".nav a:first");
于 2013-07-06T17:51:58.757 回答