Change the background of "active" button

Question

inadcod 0 Newbie Poster

15 Years Ago

Hello,

I have a webpage where I have four buttons.
when the page is loaded all you can see are the buttons but when you click a button a content appears, content which changes when clicked on another button. This is done by a siompel js script with an onClick command.

What I want to do is to change the background of the active button, I mean if I click on the first button, and see the content related to this button, then the button should have a different background.

All I managed to do so far is to change the background on hovering over the buttons, but it's just not enough for the visitors to know which content they are reading.

Please help!

Here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css" media="all"> @import "style.css";</style>
<script type="text/javascript">
 <!--
var state = 'hidden';

function showhide(layer_ref) {

if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>


<title>EXAMPLE PAGE</title>

</head>

<body>
     <div id="detail">
      <form>
       <input type="button" class="tab" value="Content 1"
        onClick="MM_showHideLayers('shtab1','','show','shtab2','','hide','shtab3','','hide','shtab4','','hide')"  />
       <input type="button" class="tab" value="Content 2"
        onClick="MM_showHideLayers('shtab1','','hide','shtab2','','show','shtab3','','hide','shtab4','','hide')"  />
       <input type="button" class="tab" value="Content 3"
        onClick="MM_showHideLayers('shtab1','','hide','shtab2','','hide','shtab3','','show','shtab4','','hide')"  />
       <input type="button" class="tab" value="Content 4"
        onClick="MM_showHideLayers('shtab1','','hide','shtab2','','hide','shtab3','','hide','shtab4','','show')"  />
      </form>
      <div class="tabsdet">
      <!-- HIDDEN INFORMATION TO BE SHOWN ONCLICK -->
      <div id="shtab1">
       <p>This is the content that is associated with button 1</p></div>
      <div id="shtab2">
       <p>This is a different content associated with button 2</p></div>
      <div id="shtab3">
       <p>This is yet another different content associated with button 3</p></div>
      <div id="shtab4">
        <p>This content is related to button4</p></div>
       </div>
      <!-- END - HIDDEN INFORMATION TO BE SHOWN ONCLICK -->
     </div>

</body>
</html>

And this is the CSS:

#detail input {display:inline; background:transparent url(img/title.png) repeat-x;
color:#fff; font-size:14px; font-weight:bold; border:none; height:25px; padding: 0 3px 0 3px;}
#detail input:hover{background:transparent url(img/activetitle.png) repeat-x;}
#shtab1, #shtab2, #shtab3, #shtab4 { position: absolute; top: 100px; left:30px; border:1px solid #99ccff; padding:10px; 
background:transparent url(img/filtr.png) repeat; visibility: hidden;}
#shtab1 p, #shtab2 p, #shtab3 p, #shtab4 p{width:500px;}

javascript

2 Contributors
1 Reply
196 Views
3 Days Discussion Span
Latest Post 15 Years Ago Latest Post by essential

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

essential 84 Posting Shark Featured Poster · Answer 1 · 2008-11-01T12:55:37+00:00

Here you have it!

<html>
<head>
<title><!--Sample--></title>
<style type="text/css">
<!--
body {
     margin: 16px 0px 4px 0px;
     padding: 10px;
     font: bold 12px/80% Verdana, sans-serif, Arial;  
     color: DeepSkyBlue;
     text-align: center;
}

#wrapper {
   margin: 0px;
   padding: 0px;
   width: 700px;
}
#contents {
   display: block;
   clear: both;      
   padding: 4px ;
   line-height: 20px;
   background: Azure;
   width: 300px;
   height: 90px;
   border: thin solid Grey;
   border-left: 4px solid Grey;
}

#buttons { 
    padding: 0px; 
    margin: 0px 2px 0px 0px;
}
.cls1 input[type=button] {
    float: left;
    display: inline;
    margin: 0px 2px 0px 2px;
    background: DeepPowderBlue;
    color: CadetBlue;
    border: thin solid Silver;
}
.cls1 input[type=button]:hover {
    float: left;
    display: inline;
    margin: 0px 2px 0px 2px;      background: RoyalBlue;
    color: PowderBlue;
    border: thin solid DimGrey;
}
input[type=button].active {
    float: left;
    display: inline;
    margin: 0px 2px 0px 2px;      background: RoyalBlue;
    color: PowderBlue;
    border: thin solid DimGrey;
}

-->
</style>
<script language="JavaScript" type="text/javascript">
<!--

function current()
{   
   theButtons = ( document.all && !document.getElementById ) ? document.all.buttons.getElementsByTagName('input') : document.getElementById('buttons').getElementsByTagName('input'); 

 for (var i = 0; i <= theButtons.length; i++) 
{ if (event.type == 'click' && theButtons[i].className == 'active') { theButtons[i].className = ''; 
    } 
this.className ='active';    
  }  
}

if (window.addEventListener)
window.addEventListener('load',thisButton,false);
else if (window.attachEvent)
window.attachEvent('onclick',thisButton);
else if (document.getElementById)
window.onload = thisButton;

function thisButton() 
{ 
var article = (document.all && !document.getElementById) ? document.all.contents : document.getElementById('contents');
var myButtons = (document.all && !document.getElementById) ? document.all.buttons.getElementsByTagName('input') : document.getElementById('buttons').getElementsByTagName('input'); 
myButtons[0].onclick = function() { article.innerHTML = '<p>Article 1</p>'; }; 
myButtons[1].onclick = function() { article.innerHTML = '<p>Article 2</p>'; };
myButtons[2].onclick = function() { article.innerHTML = '<p>Article 3</p>'; };
for ( var x = 0; x <= myButtons.length; x++ )
{ if (document.addEventListener) 
{ myButtons[x].addEventListener('click',current,false);
    }
else if (document.attachEvent)
{ myButtons[x].attachEvent('onclick',current);    
    }
  }
}

//-->
</script>
</head>
<body>
<div id="wrapper">
<form name="frm1" action="javascript:void(0);" onsubmit="return false;">
<div id="buttons" class="cls1">
<input type="button" value="Article 1 &raquo;" />
<input type="button" value="Article 2 &raquo;" />
<input type="button" value="Article 3 &raquo;" /> 
</div>
</form>
<div id="contents">
<p>This is just simple demo,  i hope you find it useful to your site! Enjoy...</p>
</div>
</div>
</body>
</html>