Question

我想创建一个可以在每个页面上使用的导航栏。大多数导航项具有相同的样式，但是与当前页面相关的导航项具有不同的样式。我希望能够使用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">&nbsp;</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 &amp; 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 &amp; Government</a></td>
<td align="center" nowrap="nowrap" bgcolor="#0099CC" class="selected">Education &amp; Training</td>
<td align="center" nowrap="nowrap" bgcolor="#0099CC"><a href=""  class="navLinks" >Multimedia</a></td>
    <td align="center" nowrap="nowrap" bgcolor="#0099CC">&nbsp;</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;
}

Answer 1

@Ankur它正在运作，但改变了这一行：

if(pageName="about")

到

if(pageName=="about")

而不是比较，您可以像这样使用pageName：

$("#"+pageName).addClass("selected");

Answer 2

怎么样：

var meta = $("meta").get(1).attr("content");
if(meta == 'about') {
    $('#about').addClass('selected');
}

jQuery如何根据变量显示不同的项目

2 个答案: