HTML and CSS Reference
In-Depth Information
The CSS rules only get you part of the way toward implementing the navigation of the
views. Although the CSS rules declare the conditions for switching views, the rules can't
initiate the view switching. As mentioned earlier, a user's tap of a button on the navigation
bar initiates the view switch by changing the
class
attribute of the
<body>
element. The
next section describes how to implement this attribute change and link it to the view but-
tons.
5.1.3. Implementing navigation with JavaScript
In this section, you'll use JavaScript to modify the
class
attribute of the
<body>
ele-
ment. Each time the
class
value is changed to a different value, one or more CSS rules
will be activated to change the application's view. The user will initiate these changes by
tapping one of three buttons: Add Task, Settings, or Task List. Each button is implemen-
ted as a link with an anchor name of
#add
,
#settings
, or
#list
. So when a link is
selected, it will change the
location.hash
property to one of the three anchor names.
The browser will detect the change in
location.hash
and then invoke an event hand-
ler defined by the application. The event handler will respond by using the value of the
location.hash
property to set the value of the
<body>
element's
class
attribute. If
the attribute value is different from the previous one, the application will switch to the new
view.
Step 4b: Enable navigation between views using JavaScript to init- tiate view changes
Let's start off by defining methods to switch between views in the application. The code in
the next listing creates a new object constructor,
Tasks
, containing two functions,
nudge
and
jump
. When the page has loaded, a new
Tasks
object is created, which forms the
basis for your application. Take the code in the following listing and insert it into a new
file, app.js. Store this file in the same directory as index.html.
