officemanager2
Technical User
Hello: I've been working through the subject line book and it was going well until I came to the sections on Methods can change CSS. I cannot get the header border to change color when the click occurs?
I've double checked that I put the code in correctly but still cannot get the effect as the book describes.
HTML
CSS
J Query
Any suggestions are appreciated
I've double checked that I put the code in correctly but still cannot get the effect as the book describes.
HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>class_test</title>
<link rel="stylesheet" link href="styles/test_style.css" type="text/css" />
</head>
<body>
<div id="header" class="no_hover"><h1>Header</h1></div>
<button type="button" id="btn1">Click to Add</button>
<button type="button" id="btn2">Click to Remove</button>
<script src="scripts/jquery-1.6.2.min.js"></script>
<script src="scripts/my_test_scripts.js"></script>
</body>
</html>
CSS
Code:
@charset "utf-8";
/* CSS Document */
.hover{
border:solid 3px;
border-color: #C06;
}
.no_hover{
border:solid 3px;
border-color: #0F3;
}
J Query
Code:
$(document) .ready(function() {
$("btn1") .click( function() {
$("#header").addClass("hover");
$("#header").removeClass("no_hover");
});
$("btn2") .click( function() {
$("#header").addClass("hover");
$("#header").removeClass("no_hover");
});
});
// JavaScript Document
Any suggestions are appreciated