ansaurus

Question

Apply class on <a href> using javascript.

Answer 1

+1 A:

When you click each tab it is obviously going to reload the page and so javascript is not a solution here. What I usually do is add an id to the body tag that is unique to each page. So for the dashboard page the body tag would be . Then in your css stylesheet you could do:

#dashboard .dashboard {
background-color:#f0f7fa;
color:#c66653;
}

On each tab you would have the corresponding class name.

FutureKode 2010-10-26 18:40:27

+1 Keep the styles in the CSS, where the styling *should* be done. Keep javascript out of it.

Stephen P 2010-10-26 19:52:50

Answer 2

+1 A:

Well, you code actually works, but can't see it because of the redirect to cms.php. Try this:

<li><a id="dashboard" href="#" onclick="setClass('dashboard');">Dashboard</a></li>

If you want to do it another way, try something like this:

<li><a id="dashboard" href="cms.php" <?php if ($page == 'cms.php') ?>class="active"<?php } ?>>Dashboard</a></li>

and define the style in the header

.active {
  background-color:#f0f7fa;
  color: #c66653;
}

Georgi 2010-10-26 18:41:57

Thanks, it really works $break = Explode('/', $file); $page = $break[count($break) - 1]; ?>

Muhammad Sajid 2010-10-26 18:59:25

Answer 3

A:

As FutureCode and Georgi have pointed out, your JS code is working but then a different page is getting loaded. Hence you are not seeing the effect.
You can use the approach suggested by FutureCode, or alternatively, you can call your JS function onLoad of body tag.

In cms.php:

<body onload="setClass('dashboard');">

In menus.php:

<body onload="setClass('mainMenu');">

Vivek Athalye 2010-10-26 18:55:11

ansaurus

tags:

views:

answers:

Apply class on <a href> using javascript.

related questions