2009-06-26 57 views
-1

我想创建一个导航栏,以便在每个页面上使用cna。大多数导航项目具有相同的样式,但与当前页面相关的导航项目具有不同的样式。我希望能够使用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">&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; 
} 

回答

2

@Ankur这是工作,但改变这一行:

if(pageName="about") 

if(pageName=="about") 

,而不是比较可以使用页面名称如下:(!拍击头部)

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

您的解决方案的工作,我想接受的答案,但它似乎并没有登记 – Ankur 2009-06-26 06:02:54

1

如何:

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