HTML and CSS Reference
In-Depth Information
We will also provide it an
id
so we can easily refer to it:
<section
id="taskCreation" class="not"
>
The
not
class is defined in tasks.css, and provides a simple mechanism for hiding an ele-
ment. It is defined as follows:
.not {
display:none;
}
Next, we will modify the link with the text “Add Task” to have an
id
. This will allow us to
select it more conveniently with jQuery:
<a href="#"
id="btnAddTask"
>Add task</a>
Finally, we will add the following code to the script section of tasks.html:
$('#btnAddTask').click(function(evt) {
evt.preventDefault();
$('#taskCreation').removeClass('not');
});
This code will be explained in detail below.
The entire page should now look like this (changes are highlighted in bold):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task list</title>
<link rel="stylesheet" type="text/css" href="styles/tasks.css"
media="screen" />
<script src="scripts/jquery-2.0.3.js"></script>
</head>
<body>
<header>
<span>Task list</span>
</header>
<main>
