I want to create a navigation bar that cna be used on every page. Most nav items have the same styling, however the nav item that relates to the current page has differen tstyleing. I want to be able to use jQuery to read a meta tag and display the correct styling.
I have pasted my code below - this doesn't seem to work:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="page-name" content="about"/>
<title>Untitled Document</title>
<link href="frame_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js" ></script>
<script>
var pageName = $('meta[name=page-name]').attr("content");
$(document).ready(function() {
if (pageName="about") {
$('#about').addClass('selected');
}
});
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="8">
<tr>
<td align="center" bgcolor="#0099CC"> </td>
<td align="center" nowrap="nowrap" bgcolor="#0099CC"><a class="navLinks"href="">Home</a></td>
<td align="center" nowrap="nowrap" bgcolor="#0099CC"><a class="navLinks" href="">News & Events</a></td>
<td align="center" nowrap="nowrap" bgcolor="#0099CC"><a id="about" class="navLinks" href="">About</a></td>
<td align="center" nowrap="nowrap" bgcolor="#0099CC"><a class="navLinks" href="">Services</a></td>
<td align="center" nowrap="nowrap" bgcolor="#0099CC"><a class="navLinks" href="">eResearch</a></td>
<td align="center" nowrap="nowrap" bgcolor="#0099CC"><a class="navLinks" href="">Industry & Government</a></td>
<td align="center" nowrap="nowrap" bgcolor="#0099CC" class="selected">Education & Training</td>
<td align="center" nowrap="nowrap" bgcolor="#0099CC"><a href="" class="navLinks" >Multimedia</a></td>
<td align="center" nowrap="nowrap" bgcolor="#0099CC"> </td>
</tr>
</table>
<p>s</p>
</body>
</html>`
@charset "utf-8";
/* CSS Document */
.navLinks{
font-family:Verdana, Geneva, sans-serif;
font-size:small;
color:#FFF;
text-decoration:none;
}
.quick-links{
text-decoration:none;
}
#quick-links-table{
border-top:2px solid #0099CC;
border-bottom:1px solid #0099CC;
}
.text{
font-family:Verdana, Geneva, sans-serif;
font-size:small;
}
.selected{
background:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:small;
color:#000;
}