Change Css Class of li in ul onclick
Below is the simple and a short code to change or set the background color of item in menu onclick or active tab of menu (i.e. li of ul)
<!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" />
<title>List Item</title>
<style type="text/css">
ul
{
list-style-type:none;
float:left;
border-bottom: solid 2px Red;
padding-right:40px;
}
ul li
{
float:left;
width:auto;
padding:8px;
display:block;
cursor:pointer;
}
</style>
<script type="text/javascript" language="javascript">
function checklist(ctrl)
{
var list = document.getElementById("menu").getElementsByTagName('li');
for(i=0; i<list.length; i++)
{
list[i].style.background = '#ffffff';
}
ctrl.style.background = '#ff0000';
}
</script>
</head>
<body>
<ul id="menu">
<li onclick="checklist(this);">A Item</li>
<li onclick="checklist(this);">B Item</li>
<li onclick="checklist(this);">C Item</li>
</ul>
</body>
</html>
Screenshot:-
The code is simple.. just copy and paste... Enjoy..
<!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" />
<title>List Item</title>
<style type="text/css">
ul
{
list-style-type:none;
float:left;
border-bottom: solid 2px Red;
padding-right:40px;
}
ul li
{
float:left;
width:auto;
padding:8px;
display:block;
cursor:pointer;
}
</style>
<script type="text/javascript" language="javascript">
function checklist(ctrl)
{
var list = document.getElementById("menu").getElementsByTagName('li');
for(i=0; i<list.length; i++)
{
list[i].style.background = '#ffffff';
}
ctrl.style.background = '#ff0000';
}
</script>
</head>
<body>
<ul id="menu">
<li onclick="checklist(this);">A Item</li>
<li onclick="checklist(this);">B Item</li>
<li onclick="checklist(this);">C Item</li>
</ul>
</body>
</html>
Screenshot:-
The code is simple.. just copy and paste... Enjoy..
hai baiya its nice..
ReplyDeletevery useful code
ReplyDeleteThanx....Very useful code.
ReplyDeleteI am a begginer and was searching internet for a long time to find this. Thanks a lot.
ReplyDeleteHi Anish,
ReplyDeleteusefull code,
but if i add this ------- a href ="?page=one">home<a ------
The code will not work , do you have a solution to this?
plz reply if you have a solution.
Here you go...
Deletebut i have used # instead of ? because this become a query string and the page reloads and as you know javascript is static so it again loads with the page load. So you can use as in the below topic
Change Css Class of li in ul onclick with Anchor Tag
Or if you want to use ? then you have to write the code on each page by getting the url and set the button clicked
thanks for the quick reply,
Deletecan u show an example using the query string.
check topic
DeleteChange Css Class of li in ul onclick with Query String
hello Anish Rana when I'm using this not working so please tell me the exact answer I'm waiting for your response
Delete-----a-href="page.html"...
Hello Anand..
DeleteFor your solution you need to write script on each page that are linked to your menu.
Check below topic
Change Css Class of li in ul onclick - Menu Linked Pages
Hi friend helme please
ReplyDeletelook this
(Change Css Class of li in ul onclick - Menu Linked Pages
Reply)
no found
onclick not kept in each html 1,2,3
http://anishrana.blogspot.in/2014/05/change-css-class-of-li-in-ul-onclick_16.html
Deletehere is the link
very simple code, working fine
ReplyDeleteThanks you!!!!!!!!!
ReplyDeleteThank you very helpful. How can I default one of the menu items to be the 'selected' one on page load?
ReplyDeleteadd a class in style
Delete.selected
{
background : '#ff0000';
}
and then apply this class to list item which you want to be selected by default as below:
li class="selected"