...

View Full Version : Changing div with onclick



javanewbie7
11-05-2012, 05:17 PM
Hello, I've fixed a js to show/hide div onclick. That said, I also want to change the div class. Basically, think of it as a menu. When they click on a menu, it displays content. But in order for people to know when menu is selected, I want to change the bg color. I've set up a class call blog_selected. I just need to know how to change the class of the div that is clicked on and the one that was previous selected. Thanks



<style type="text/css">
<!--
#highlights {
width: 703px;
font-family: arial, georgia, sans-serif;
font: normal 14px/17px Arial, sans-serif;
height: 329px;
float:left;
padding: 0;
background-color: #FFFFFF;
border-right: 5px solid black;
position: relative;


}

#highlights #blogs {
background-color: #bf2626;
border-top: 5px solid black;
height: 35px;
padding-left: 46px;
width: 657px;
float: left;
}

#highlights #blogs .blog {
display: block;
float:left;
padding: 8px 15px;
color: #fff;
cursor: pointer;

}

#highlights #blogs .blog_selected {
background: #fff no-repeat bottom center;
border-top: 5px solid black;
color: #E5695D;
padding: 8px 20px;
float: left;
display: block;
margin-top: -5px;
height: 40px;
}

#highlights #latestnews {
float:left;
height: 260px;
width: 659px;
background-color: #fff;
padding: 0;
margin: 18px 22px; /*margin: 20px;*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}


#highlights #latestnews ul {
height: 245px;
overflow: hidden;
margin: 0;
padding: 15px 0 0 40px;
list-style-type: disc;
}

#highlights #latestnews h3 {
margin: 0 0 2px 0;
font-size: 90%;
}

#highlights #latestnews h3 a {
color: #4895e8; /*color: #6AACDC;*/
text-decoration: none;
}

#highlights #latestnews h3 a:hover {
color: #63AC5B;
}

#highlights #latestnews p {
font-size: 90%;
padding: 0;
}
-->
</style>


</head>
<body>
<script type="text/javascript">


var current = null;

function showresponddiv(messagedivid){
var id = messagedivid.replace("message-", "respond-"),
div = document.getElementById(id);

// hide previous one
if(current && current != div) {
current.style.display = 'none';
}

if (div.style.display=="none"){
div.style.display="inline";
current = div;
}
else {
div.style.display="none";
}
}
</script>
<div id="highlights">
<div id="blogs">
<div id="message-1" class="blog_selected" onclick="showresponddiv(this.id)">News</div>
<div id="message-2" class="blog" onclick="showresponddiv(this.id)">Blogs</div>
<div id="message-3" class="blog" onclick="showresponddiv(this.id)">Newshour</div>
<div id="message-4" class="blog" onclick="showresponddiv(this.id)">Days of Dust</div>

</div>
<div id="respond-1" style="display:none; background-color: #FFFFFF;" class="latestnews"><table width="700" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td width="220" style="text-align: center; "><br />
<br />
<a target="_blank" href="http://straight2jackie.blogspot.com/"><img width="180" height="53" align="middle" alt="Send your questions and comments to program director Jackie" title="Straight 2 Jackie" src="
/filecabinet/folder48/1300802705blog.jpg" /></a></td>
<td>
<h1 style="text-align: center; ">Politics and The Civil Wars...don't you just love it?</h1>
<p></p>
PBS is rerunning their excellent look at the candidates tonight...Mitt Romney and Barack Obama have spent hundreds of millions of dollars to tell their own stories...<br />
<p></p>
<p></p>
<p></p>
<p><a target="_blank" href="http://straight2jackie.blogspot.com/2012/11/politics-and-civil-warsdont-you-just.html">Straight to Jackie--Continue Reading</a></p>
<p></p>
</td>
</tr>
</tbody>
</table>
<hr />
</div>
<div id="respond-2" style="display:none; background-color: #FFFFFF;"><table width="700" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td width="220" style="text-align: center; "><a href="http://apublicview.wordpress.com/" target="_blank"><img src="folder1/publicview.jpg" alt="A Public View with John Kanelis" width="180" height="70" /></a></td>
<td>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "><em>REMEMBERING ‘BLACK SUNDAY’<br />
</em></h1>
<p></p>
<p></p>
Imagine the sky turning black in the middle of the day. Is it because of a solar eclipse? Hardly.
<p>The sunlight is being obliterated by something quite sinister...</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><a href="http://apublicview.wordpress.com/2012/11/01/remembering-black-sunday/" target="_blank">A Public View--Continue Reading</a></p>
<p></p>
</td>
</tr>
</tbody>
</table>
<hr />
<table width="700" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td width="220" style="text-align: center; "><img src="/filecabinet/April%20Newsletter/doubletake_small.jpg" alt=" Blogger Hilary takes a look at entertainment programs" width="180" height="80" border="0" /></td>
<td>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "></h1>
<h1 style="text-align: center; "><em>ON STORY: “CREATING COMPLEX CHARACTERS”</em></h1>
<p></p>
<p></p>
<p>Like I said before, ‘On Story’ continues to top itself week after week. Sunday night’s episode featuring Rodrigo Garcia challenged both my knowledge and opinions... .....</p>
<p><a target="_blank" href="http://hilarysdoubletake.wordpress.com/2012/10/30/on-story-creating-complex-characters/">Hilary's Double Take--Find out more</a></p>
<p></p>
<p></p>
<p></p>
</td>
</tr>
</tbody>
</table>
</div>
<div id="respond-3" style="display:none; background-color: #FFFFFF;"><table width="700" cellspacing="1" cellpadding="1" border="0" align="center">
<p><!-- Tier 1 NewsHour Video MODULE BEGIN --> <script language="JavaScript" src="http://www.pbs.org/newshour/video/modules/legacy/1.js"></script> <!--Tier 1 NewsHour Video MODULE END --></p>
<!-- Tier 2 NewsHour Video MODULE BEGIN --> <script language="JavaScript" src="http://www.pbs.org/newshour/video/modules/legacy/2.js"></script> <!--Tier 2 NewsHour Video MODULE END --> <!-- Tier 3 NewsHour Video MODULE BEGIN --> <script language="JavaScript" src="http://www.pbs.org/newshour/video/modules/legacy/3.js"></script> <!--Tier 3 NewsHour Video MODULE END -->
<hr />
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum