2014-05-01 94 views
-7

出于某种原因,我不认为我的JavaScript不能真正能够“连接”或链接到我的HTML页面。我试图甚至把JavaScript放在我的HTML代码中,但我不知道实际上是什么错误。JavaScript不工作在我的代码?

继承人我的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="ja"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="description" content="practice"> 
<meta name="keywords" content="practice"> 
<title>Practice</title> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery_regular.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script> 
<script type="text/javascript" src="js/top_javascript.js"></script> 
<script type="text/javascript" src="js/jquery_rollover.js"></script> 
<script type="text/javascript" src="js/jquery_slideout.js"></script> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<link rel="stylesheet" href="stylesheet/top_style.css" type="text/css" media="all"> 
<link rel="shortcut icon" href="favicon.ico" /> 


</head> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("about").hover(function(){ 
    $("about").css("background-color","yellow"); 
    },function(){ 
    $("about").css("background-color","pink"); 
    }); 
}); 
</script> 

    <body onLoad="fontSizeChg(0);"> 
     <div id="top_wrapper"> 
      <!-- Maint --> 
      <div id="top_main_box"> 
      <div id="slide"> 
       <!-- Main left --> 
       <div id="top_main_l_box"> 
        <!-- Main left logo --> 
        <div id="top_main_logo"><img src="image/title.png" alt=""></div> 

        <!-- Main left Navi --> 
        <ul id="top_main_navi_1"> 
         <li id="about"> ABOUT </li> 
         <li><a><img src="image/member.png" alt="" class="rollover"></a></li> 
         <li><a><img src="image/photo.png" alt="" class="rollover"></a></li> 
         <li><a><img src="image/links.png" alt="" class="rollover"></a></li> 
         <li><a><img src="image/contact.png" alt="" class="rollover"></a></li> 
        </ul> 



       </div> 
       <div id="about_this"> 
         This is all the things about our page 
       </div> 
+3

' “约”'不有效的选择器。那么,除非你有''元素,但它看起来不像你。 –

+1

Javascript现在已经为您提供了先进的方法......您应该从基本的HTML标记开始,以及如何呈现HTML页面及其所有项目。访问这里 - http://www.w3schools.com/html/html_intro.asp 因为你的HTML标记是错误的,你需要先学习它,下一步将是CSS,然后是JS。 –

回答

5

您需要使用#通过id到目标元素:

$(document).ready(function(){ 
    $("#about").hover(function(){ 
     $(this).css("background-color","yellow"); 
    },function(){ 
     $(this).css("background-color","pink"); 
    }); 
}); 

而且,你只需要包括jQuery的一次,目前已加载两次,所以你可以删除它:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
2

你试图引用t o about元素。哪些不存在。所以,你需要的代码更改为以下:

<script> 
$(document).ready(function(){ 
    $("#about").hover(function(){ 
    $("#about").css("background-color","yellow"); 
    },function(){ 
    $("#about").css("background-color","pink"); 
    }); 
}); 
</script> 
2

试试这个 -

<script> 
$(document).ready(function(){ 
    $("#about").hover(function(){ 
    $("#about").css("background-color","yellow"); 
    },function(){ 
    $("#about").css("background-color","pink"); 
    }); 
}); 
</script> 
0

试试这个你打错ID

$(document).ready(function(){ 


$("#about").hover(function(){ 

$("#about").css("background-color","yellow"); 
},function(){ 

$("#about").css("background-color","pink"); 
    }); 
});