I need a Javascript equivalent to the following code. I am converting a php website into a django website and on a static page I have the following:
<li<?if($page == "home") {?> class="active"<?}?>><a href="/home" title="Home">Home</a></li>
The problem is I would like to remove the php here and have the class="active" when on that page using javascript
If you REALLY need to do this, you can use .addClass() in jquery http://api.jquery.com/addClass/
There is no CSS equivalent. CSS isn't that smart (yet). You can do something in JavaScript but that would be silly if you already can do it with a server side language.
Note The original title asked for CSS, not JavaScript. It has since been edited.
CSS is a language for styling HTML elements.
PHP is a server-side scripting language.
There's a big difference with that. You cannot do what CSS can do in PHP, and vice versa. Imagine an artist, and an engineer.
JavaScript is your closest way. It's a client-side scripting language. And to do what you want to do, in jQuery:
$('li').addClass('active');
But of course, you need to post more of your code.
You don't need javascript for this. You can dynamically add a class to the body tag, like so:
<body class="blog">
...and add a class to each of your links like so:
<a class="home" href="" >...</a>
<a class="blog" href="" >...</a>
<a class="about" href="" >...</a>
...and then add this rule to your css:
body.blog a.blog, body.home a.home, body.about a.about
{
// Do stuff that you only want applied to the "active" page link
}
The basic idea is that this only applies your 'active' styling to the element on the page with the correct match between the body tags class, and the element you want styled's class
to get current page in js,
var currentpage = document.location.href
// this will return the full path e.g. http://www.home/home.html
var homepage = currentpage.search(/home.html/);
if (homepage >-1)...