Как jQuery может показывать разные элементы на основе переменной - PullRequest
Новая
       7

Как jQuery может показывать разные элементы на основе переменной

0 голосов
/ 26 июня 2009

Я хочу создать панель навигации, которая будет использоваться на каждой странице. Большинство элементов навигации имеют одинаковый стиль, однако элемент навигации, относящийся к текущей странице, имеет различный стиль. Я хочу использовать 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 ]

2 голосов
/ 26 июня 2009

@ Ankur Работает, но измените эту строку: 

if(pageName="about")

до 

if(pageName=="about")

вместо сравнения вы можете использовать pageName следующим образом: 

$("#"+pageName).addClass("selected");
1 голос
/ 26 июня 2009

Как насчет: 

var meta = $("meta").get(1).attr("content");
if(meta == 'about') {
    $('#about').addClass('selected');
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...