Can anyone help me with the following?
I have a navigation bar, for example:
Step_1.html - Step_2.html - Step_3.html - Step_4.html
i would like the links for the next two steps ie 3 and 4 to be disabled.
Then when they go to step 2 only step 4 to be disabled.
(but heres the problem when i get to say Step_4.html and want to go back to Step_2.html, i want to be able to click straight back to Step_4.html as i have been through all the steps already so i would like it to now not be disabled in my navigation bar)
I would only like to use java-script if possible !
Page 1 looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="sessvars.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p4</title>
</head>
<body>
<p>Page 1</p>
<p><a href="p2.html">Page 2</a></p>
<p>Page 3</p>
<p>Page 4</p>
</body>
</html>
Page 2 like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="sessvars.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p4</title>
</head>
<body>
<p><a href="p1.html">Page 1</a></p>
<p>Page 2</p>
<p><a href="p3.html">Page 3</a></p>
<p>Page 4</p>
</body>
</html>
page 3 like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="sessvars.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p4</title>
</head>
<body>
<p><a href="p1.html">Page 1</a></p>
<p><a href="p2.html">Page 2</a></p>
<p>Page 3</p>
<p><a href="p4.html">Page 4</a></p>
<p> </p>
</body>
</html>
page 4 like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="sessvars.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p4</title>
</head>
<body>
<p><a href="p1.html">Page 1</a></p>
<p><a href="p2.html">Page 2</a></p>
<p><a href="p3.html">Page 3</a></p>
<p>Page 4</p>
</body>
</html>
You are going to want to use cookies created in javascript to store the state of where they are in the step-by-step process.
Check out http://www.w3schools.com/js/js_cookies.asp
Make a cookie that stores the highest step the user has gotten to. Check the value of this on each page, and if the page they are on is "higher" (step 4 > step 3), overwrite the cookie with this new value. That way, if they back up to step 1 from step 4, they will still have "access" to step 4.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.