2009-06-26 83 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'); 
}