Problem changing the background color of an list item

Page 1 of 1

3 Replies - 706 Views - Last Post: 13 September 2012 - 12:56 PM

#1 dweston  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 11-September 12

Problem changing the background color of an list item

Posted 11 September 2012 - 11:11 AM

Hello everyone,

I'm completely new to HTML/CSS/Javascript and I'm having trouble figuring out how to change the background color of one element by clicking on another element. I've tried changing the class using replace(), but that doesn't seem to work. I realize that I can use jquery, but we're trying to avoid using jquery if at all possible. 

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
		<STYLE TYPE="text/css">

<!-- Title Bar -->
#header
{
color:black;
font-size: 39px;
text-align:center;
background-color:#9999DD;
border-style:solid;
border-color:#666666;
border-width:1px;
width:100%;
height:50px;
right:0px;
padding:0px 0px 0px 0px;
position:fixed;
top:0px;
z-index:0;
}
<!-- Area under Left Nav Bar -->

#content
{
position:relative;
left:175px;
top:36px;
z-index:-1;
background:#FFFFFF;
}

td.username
{
font-size:17px;
}

<!-- Message Bar CSS -->
#messageBar
{
position:fixed;
text-align:right;
top:0px;
z-index:1;
}

<!--Left Nav Menu CSS -->

<!--Display settings for sub-menus-->
#subMenu1{display:none;}
#subSubMenu1{display:none;}
#subMenu2{display:none;}
#subSubMenu2{display:none;}

<!--Class background-colors for sub-menu after changing to .highlighted-->
.subMenu1{background-color:CCCCFF;}
.subMenu2{background-color:CCCCFF;}
.subSubMenu1{background-color:CCCCFF;}
.subSubMenu1{background-color:CCCCFF;}

<!--navigation class-->
div.navigation {
font-size:16px;
width:175px;
height:100%;
top:49px;
left:0px;
position:fixed;
border-style:solid;
border-color:#666666;
border-width:1px;
background-color:#CCCCFF;
}
div.navigation ul {margin:0px; padding:0px;}
div.navigation li {list-style:none; font-family: tahoma, verdana, sans-serif;}
ul.top-level {background:#CCCCFF;}
ul.top-level li {
border-bottom:#666666 solid;
border-width:1px;
}

<!--Second Level-->
	div.navigation .subLevel {
	    background: #CCFFCC;
	}

<!--Third Level-->
	div.navigation .subLevel .subLevel {
	background: #FFFFCC;
	}

<!--class to highlight user selection-->
.highlighted {background:#FF9966;)



		</STYLE>
<script>

<!--function to open sub-menu under Menu1. Also changes the selected menu's background to orange-->
function toggleSub1(menuLevel, menuID)
{
	menuID.className="highlighted";
	if (menuLevel=="1")
	{
		if (document.getElementById('subMenu1').style.display=='block')
		{
			document.getElementById('subMenu1').style.display='none';
			menuID.className="navigation";
		}
		else
			{
			document.getElementById('subMenu1').style.display='block';
			}
	}
	if (menuLevel=="2")
	{
		if (document.getElementById('subSubMenu1').style.display=='block')
		{
			document.getElementById('subSubMenu1').style.display='none';
			menuID.className="navigation";
		}
			else
			{
			document.getElementById('subSubMenu1').style.display='block';
			}
	}
}

<!--function to open sub-menu under Menu2. Also changes the selected menu's background to orange-->
function toggleSub2(menuLevel, menuID)
{
	menuID.className="highlighted";
	if (menuLevel=="1")
	{
		if (document.getElementById('subMenu2').style.display=='block')
		{
			document.getElementById('subMenu2').style.display='none';
			menuID.className="navigation";
		}
		else
			{
			document.getElementById('subMenu2').style.display='block';
			<!--closes Menu1-->
			document.getElementById('subMenu1').style.display='none';
			document.getElementById('subsubMenu1').style.display='none';
			<!--changes background of Menu1 and sub-menu1 back to their original colors-->
			document.getElementById('subsubMenu1').className=document.getElementById("subSubMenu1").className.replace("highlighted","subSubMenu1");
			document.getElementById('subMenu1').className=document.getElementById("subMenu1").className.replace("highlighted","subMenu1");
			}
	}
	if (menuLevel=="2")
	{
		if (document.getElementById('subSubMenu2').style.display=='block')
		{
			document.getElementById('subSubMenu2').style.display='none';
			menuID.className="navigation";
		}
			else
			{
			document.getElementById('subSubMenu2').style.display='block';
			}
	}
}
</script>
</head>



<body>
<!-- Table for message bar -->
<table id=header width="100%" border=0 style="border-collapse: collapse;">
	<tr>
		<td class="username" width=175>LastName, FirstName<br>Log Out</td>
		<td>Title of the Page</td>
		<td class="username" width=175></td>
	</tr>
</table>
<div id=messageBar>
	<table width=100% style="border-collapse:collapse">
	<tr>
	<td> </td>
	<td width=375>
		<table style="border-collapse:collapse" width=375>
		<tr>
			<td width=125 height=25>Teddie</td>
			<td width=125 height=25>Chie</td>
			<td width=125 height=25>Yosuke</td>
		</tr>
			<tr>
				<td width=125 height=25>Yukiko</td>
				<td width=125 height=25>Kanji</td>
				<td width=125 height=25>Naoto</td>
			</tr>
	</table>
	</td> <td width=12>&nbsp </td>
	</tr>
		</table>
</div>

<!-- Left Nav Menu -->
<nav>
<div class="navigation">
<ul class="top-level">
	<li onclick="toggleSub1(1, this)">Menu 1</li>
		<ul id="subMenu1" class="subLevel">
			<li>Sub-menu 1</li>
			<li onclick="toggleSub1(2, this); window.event.cancelBubble = true;">Sub-menu 2</li>
				<ul id="subSubMenu1" class="subLevel">
					<li>Sub Sub-menu 1</li>
					<li onclick="window.location='http://www.google.com'">Sub Sub-menu 2</li>
					<li>Sub Sub-menu 3</li>
				</ul>
			<li>Sub-menu 3</li>
		</ul>
	<li onclick="toggleSub2(1, this)">Menu 2</li>
		<ul id="subMenu2" class="subLevel">
			<li>Sub-Menu 1</li>
			<li onclick="toggleSub2(2, this); window.event.cancelBubble = true;">Sub-Menu 2</li>
				<ul id="subSubMenu2" class="subLevel">
					<li>Sub Sub-Menu 1</li>
					<li>Sub Sub-Menu 2</li>
					<li>Sub Sub-Menu 3</li>
					<li>Sub Sub-Menu 4</li>
					<li>Sub Sub-Menu 5</li>
					<li>Sub Sub-Menu 6</li>
				</ul>
			<li>Sub-Menu 3</li>
			<li>Sub-Menu 4</li>
			<li>Sub-Menu 5</li>
		</ul>
	<li>Menu 3</li>
	<li>Menu 4</li>
</ul>

</div>
</nav>

<div id=content>
This is where text goes

</div>
</body>

</html>


Any help would be appreciated!

Is This A Good Question/Topic? 0
  • +

Replies To: Problem changing the background color of an list item

#2 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: Problem changing the background color of an list item

Posted 11 September 2012 - 02:14 PM

Something along these lines?
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function changeColor(IDS) {
  var sel = document.getElementById('divContent').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) {
    sel[i].style.backgroundColor = 'white';
  }
  document.getElementById(IDS).style.backgroundColor = 'yellow';
}
</script>
<style type="text/css">
li { 
  list-style-type: none;
  text-decoration:underline;
}
.divInfo {
  height:100px;  width:150px;
  border:1px solid black;
  float:left;
}
</style>

</head>
<body>
<ul>
 <li onclick="changeColor('div1')">Select 1</li>
 <li onclick="changeColor('div2')">Select 2</li>
 <li onclick="changeColor('div3')">Select 3</li>
</ul>
<p>
<div id="divContent">
 <div id="div1" class="divInfo">Information for div 1</div>
 <div id="div2" class="divInfo">Information for div 2</div>
 <div id="div3" class="divInfo">Information for div 3</div>
 <br style="clear:both" />
</div>
</body>
</html>

This post has been edited by JMRKER: 11 September 2012 - 02:15 PM

Was This Post Helpful? 0
  • +
  • -

#3 dweston  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 11-September 12

Re: Problem changing the background color of an list item

Posted 13 September 2012 - 10:54 AM

That was enlightening! Thank you very much!
Was This Post Helpful? 0
  • +
  • -

#4 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: Problem changing the background color of an list item

Posted 13 September 2012 - 12:56 PM

View Postdweston, on 13 September 2012 - 11:54 AM, said:

That was enlightening! Thank you very much!


You're most welcome.
Happy to help.
Good Luck!
:)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1