Question

我正在尝试将类添加到第一个链接。

代码如下所示：

<p class="breadcrumb"> <a href="index.php"> Home </a> <a href="contact.php">Contact</a>

我不知道如何在第一个链接“Home”（index.php）中添加一个类，所以我可以用css设置它。

<script type="text/javascript" charset="utf-8">
$(".breadcrumb a:first").addClass("itemhover");
</script>

这不起作用。

Answer 1

该元素可能尚未加载。延迟您的Javascript，直到所有元素都加载了$(document).ready()：

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $(".breadcrumb a:first").addClass("itemhover");
});
</script>

Answer 2

将文件中的代码包装好。

<script type="text/javascript" charset="utf-8">
$(function(){
    $(".breadcrumb a:first").addClass("itemhover");
});
</script>

Answer 3

<script type="text/javascript" >
$(document).ready(function() {
$(".breadcrumb a:first").addClass("itemhover");
});
</script>

Answer 4

尝试在链接中添加ID

<p class="breadcrumb"> <a id="home" href="index.php"> Home </a> <a href="contact.php">Contact</a>

然后试试这个：

$(document).ready(function() {
    $("#home").addClass("itemhover");
});

Answer 5

你的语法是正确的但是CSS覆盖存在一些问题，你可以使用！important对你的类属性

示例：

<script>
    $(function(){

        $(".breadcrumb a:first").addClass("itemhover");

    });
</script>



.itemhover{
        color : red !important;
}

Answer 6

示例页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" --"http://www.w3.org/TR/REC-html40/strict.dtd"-->
<html>
<head>
  <link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
  <script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script> 
  <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>

  <script>

    $(function(){
        $(".breadcrumb a:first").addClass("itemhover");
    });
  </script>

<style type="text/css">
.itemhover{
    color : red !important;
}
</style>
</head>
<body>

<p class="breadcrumb"> <a href="index.php"> Home </a> 
<br />
<a href="contact.php">Contact</a>
</P>
</body>
</html>

AddClass到<a> using jquery</a>

6 个答案: