How do I always have the \'current page\' highlighted? The user should no by loo
ID: 3574791 • Letter: H
Question
How do I always have the 'current page' highlighted? The user should no by looking at the navigation bar that which page he is on. For example, if I am on 'Home' page, the navigation bar for the home page should be highlighted. Similarly, if I am on 'Contacts' page, the navigation bar for the contact page should be highlighted.
Here is the HTML code for my home page:
<DOCTYPE html>
<html lang= "en">
<head>
<meta name="viewport" content="width=device-width">
<meta charset= "utf-8">
<title> Irfan, CSC 170 Project 3 </title>
<link rel="stylesheet" type="text/css" href="css/navigation.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<div class = "logo"><h1><a href="index.html"><img src="images/da.jpg" alt ="Logo">
Famous Personalities </h1> </a>
CSC 170 - Web Design and Development </div>
</header>
<nav class = "menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="toni-morison.html">Toni Morison</a></li>
<li><a href="ada-lovelace.html">Ada Lovelace</a></li>
<li><a href="leonardo-da-vinci.html">Leonardo Da Vinci</a></li>
<li><a href="grace-hopper">Grace Hopper</a></li>
</ul>
</nav>
<div class="container">
<article>
</article>
<Footer>
<p>
Irfan Bashir <br>
CSC 170 Webpage Design and Development <br>
Link to Project: <br>
Contact: 585 xxx xxxx
</p>
<nav class = "menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="toni-morison.html">Toni Morison</a></li>
<li><a href="ada-lovelace.html">Ada Lovelace</a></li>
<li><a href="leonardo-da-vinci.html">Leonardo Da Vinci</a></li>
<li><a href="grace-hopper.html">Grace Hopper</a></li>
</ul>
</nav>
</Footer>
</body>
</html>
Here is the css code:
nav UL {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
}
nav li {
border: 1px solid black;
display: table-cell;
}
nav ul a {
color: black;
text-decoration: none;
}
.menu a:hover {
color: white;
background-color: #333333;
}
.menu a {
display:block;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 20px;
}
.menu li { display: table-cell; }
.menu ul { border-collapse: collapse; }
.currentLink {
color: #640200;
background-color: #000000;
}
.logo {
position:relative;
width: 100%;
float: left;
display: block;
padding: 20px;
}
Explanation / Answer
<html >
<head>
<DOCTYPE html>
<html lang= "en">
<head>
<meta name="viewport" content="width=device-width">
<meta charset= "utf-8">
<title> Irfan, CSC 170 Project 3 </title>
<link rel="stylesheet" type="text/css" href="css/navigation.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
$(this).addClass('current');
}
});
});
</script>
<style>
a.current {
}
nav a.current {
background:red;
color:white;
}
nav UL {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
}
nav li {
border: 1px solid black;
display: table-cell;
}
nav ul a {
color: black;
text-decoration: none;
}
.menu a:hover {
color: white;
background-color: #333333;
}
.menu a {
display:block;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 20px;
}
.menu li { display: table-cell; }
.menu ul { border-collapse: collapse; }
.currentLink {
color: #640200;
background-color: #000000;
}
.logo {
position:relative;
width: 100%;
float: left;
display: block;
padding: 20px;
}
</style
</head>
<body>
<header>
<div class = "logo"><h1><a href="index.html"><img src="images/da.jpg" alt ="Logo">
Famous Personalities </h1> </a>
CSC 170 - Web Design and Development </div>
</header>
<nav class = "menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="toni-morison.html">Toni Morison</a></li>
<li><a href="ada-lovelace.html">Ada Lovelace</a></li>
<li><a href="leonardo-da-vinci.html">Leonardo Da Vinci</a></li>
<li><a href="grace-hopper.html">Grace Hopper</a></li>
</ul>
</nav>
<div class="container">
<article>
</article>
<Footer>
<p>
Irfan Bashir <br>
CSC 170 Webpage Design and Development <br>
Link to Project: <br>
Contact: 585 xxx xxxx
</p>
<nav class = "menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="toni-morison.html">Toni Morison</a></li>
<li><a href="ada-lovelace.html">Ada Lovelace</a></li>
<li><a href="leonardo-da-vinci.html">Leonardo Da Vinci</a></li>
<li><a href="grace-hopper.html">Grace Hopper</a></li>
</ul>
</nav>
</Footer>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------
bold text add in every .html file
like:-
JQuery is:-
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
$(this).addClass('current');
}
});
});
</script>
CSS is:-
<style>
a.current {
}
nav a.current {
background:red;
color:white;
} <style>
---------------------------------------------------------------------------------------------
If you have any query, please feel free to ask.
Thanks a lot.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.