jQuery 如何根据变量显示不同的项目
我想创建一个可以在每个页面上使用的导航栏。 大多数导航项具有相同的样式，但是与当前页面相关的导航项具有不同的样式。 我希望能够使用 jQuery 读取元标记并显示正确的样式。
我已将代码粘贴在下面 - 这似乎不起作用：
<!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;
}
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
怎么样：
How about:
@Ankur它正在工作，但是更改此行：
您可以使用 pageName来
代替比较，如下所示：
@Ankur It is working, but change this line:
to
instead of comparison you can use pageName like this: