2011-06-07 83 views
1

我想添加一個類到第一個鏈接。添加類到<a>使用jquery

的代碼看起來是這樣的:

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

我不知道如何將類添加到第一鏈接「家」(的index.php),所以我可以用CSS樣式它。

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

這沒有奏效。

回答

2

將代碼包裝在文檔中準備就緒。

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

該元素可能尚未加載。耽誤你的Javascript,直到所有的元素都被加載$(document).ready()

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

遺憾的是,沒有工作。 :( – user787432 2011-06-07 12:43:26

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

嘗試添加一個ID,鏈接

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

,然後試試這個:

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

在這種情況下,將無法正常工作。這就是爲什麼我正在尋找解決方法;) – user787432 2011-06-07 12:45:09

+0

在這種情況下?添加ID?或在onReady事件? – JAiro 2011-06-07 14:36:56

0

你的語法是正確的,但有一些CSS覆蓋你可以使用的問題!對你重要的類屬性

例如:

<script> 
    $(function(){ 

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

    }); 
</script> 



.itemhover{ 
     color : red !important; 
} 
+0

沒有工作;( – user787432 2011-06-07 12:52:43

+0

我認爲你是不包括的js jQuery的文件 – jaychapani 2011-06-07 12:55:47

+0

<腳本類型= 「文/ JavaScript的」 SRC = 「包括/ JScript的/的jquery.js」> – user787432 2011-06-07 13:07:08

0

樣頁:

<!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> 
+0

「的index.php:17Uncaught語法錯誤:。意外的令牌)「 – user787432 2011-06-07 13:03:04

+0

這是一個html頁面。 – jaychapani 2011-06-07 13:54:59