How about use the widely ways to achieve this?
1-) Via CSS
Assign an ID to the body element for each page, like:
<body id="home">, <body id="about">, <body id="contact">
and an ID for each menu item like:
<div id="menu">
<ul>
<li id="ho"> <a href="default.aspx">home</a></li>
<li id="ab"> <a href="about.aspx">about</a></li>
<li id="co"> <a href="contact.aspx">contact</a></li>
</ul>
</div>
And CSS selector for current page is:
body#home li#ho a:link, body#about li#ab a:link, body#contact li#co a:link
{
...css rules...
}
2-) Via PHP,ASP or whatever dinamic language
PHP example (I am not familiar with ASP)
<?php
$currentpage = basename($_SERVER['SCRIPT_NAME']);
?>
<li><a href="default.php" <?php if ($currentpage == 'default.php') {echo
'class="current_page"';} ?>>home</a></li>
<li><a href="about.php" <?php if ($currentpage == 'about.php') {echo
'class="current_page"';} ?>>about</a></li>
<li><a href="contact.php" <?php if ($currentpage == 'contact.php') {echo
'class="current_page"';} ?>>contact</a></li>
CSS:
a.current_page {
... css rules...
}
Maurício
-----Mensagem Original-----
De: "expresso" <dschin...@gmail.com>
Para: <jquery-en@googlegroups.com>
Enviada em: domingo, 1 de março de 2009 21:53
Assunto: [jQuery] Change CSS depending on page you're on
I'm trying to do something simple but this is my first stab at doing this
in
JQuery.
<div id="menu">
<ul>
<li class="current_page_item"> default.aspx home </li>
<li> about.aspx about </li>
<li> contact.aspx contact </li>
</ul>
</div>
based on the page, change the css. So like doing a window.location and
then
parse out the url to the page then check. If it's the about.aspx I need
to
change the li item's css.
--
View this message in context:
http://www.nabble.com/Change-CSS-depending-on-page-you%27re-on-tp22280342s27240p22280342.html
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
