Apply class on <a href> using javascript
I am using php. Create a file leftcolumn.php which includes following codes..
<!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=iso-8859-1" />
<script language="javascript">
function setClass( tabName ){
document.getElementById(tabName).style.background = '#f0f7fa';
document.getElementById(tabName).style.color = '#c66653';
}
</script>
</head>
<body>
<div id="sidebar">
<img src="images/logo.png" />
<ul class="sideNav">
<!-- Use class="active" for selected tab -->
<li><a id="dashboard" href="cms.php" onclick="setClass('dashboard');">Dashboard</a></li>
<li><a id="mainMenu" href="menus.php">Main Menus</a></li>
<li><a id="retailers" href="#">Retailers</a></li>
<li><a id="productimages" href="productimages.php">Product Images</a></li>
<li><a id="pressreleases" href="pressreleases.php">Press Releases</a></li>
<li><a id="news" href="news.php">In the News</a></li>
</ul>
<!-- // .sideNav -->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>
Now, I just want to apply background = '#f0f7fa' & color = '#c66653' (on active tab) whe开发者_Python百科n user click on a tab, for this I created a function but it does not apply change.....!
Kindly help to solve it....
Thanks.....
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;
}
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.
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');">
加载中,请稍侯......
精彩评论