Skip to main content
C
cfnew
Known Participant
March 4, 2010
Question

hi this is just css to fix

  • March 4, 2010
  • 1 reply
  • 584 views

<style>
.tabContentTabs a {
background:none repeat scroll 0 0 #94BBD5;
color:#FFFFFF;
display:block;
font-size:11px;
font-weight:bold;
padding:4px 22px;
text-decoration:none;
}
.tabContentTabs a:visited {
background:none repeat scroll 0 0 #94BBD5;
}
.tabContentTabs a:hover {
background:none repeat scroll 0 0 #8EA4BE;
}
.tabContentTabs a:active {
background:none repeat scroll 0 0 #DBEAF5;
}

</style>
<script>
   function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes.getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes.id == thechosenone) {
                        newboxes.style.display = 'block';
                  }
                  else {
                        newboxes.style.display = 'none';
                  }
            }
      }
}
</script>
<table >
   <tr>
      <td>
         <div  class="tabContentTabs">
         <a   href="javascript:showonlyone('newboxes1');">Select 1st Form</a>                    
         </div>   
         
      </td>
      <td>
         <div class="tabContentTabs">
            <a  href="javascript:showonlyone('newboxes2');">Select 2nd Form</a>           
         </div>    
        
      </td>     
   </tr>
</table>
<div name="newboxes" id="newboxes1" style=" display: none;"> Hi this is 1st Form</div>
<div name="newboxes" id="newboxes2" style=" display: block;"> Hi this is 2nd Form </div>   

tha code above has two tabs in which second tab is default to show first , but i need to shade the second tab when it loads as it is default one and when u click on first tab it has to be shaded to show difference to users.

this is not working properly in Mozilla and IE

i need some suggestions to fix this.

Thanks.

This topic has been closed for replies.

1 reply

M
mgw4jc
Inspiring
March 4, 2010

You should really look into using jQuery or even CF's tab capabilities. It makes this stuff much easier. But to answer your question, you'll want to add an "activeTab" class. I'm pasting the entire thing, but the parts that changed are a new "activeTab" style, a few extra lines in the javascript, id attributes to the divs that are the tabs, and also setting the activeTab class on the default tab (tab 2).

Again, I would urge you to try either jQuery UI elements or the CF built in stuff (if on CF 8 or later). The table based tabs you have are going to get complicated the further you go.

<!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=utf-8" />
<title>Untitled Document</title>
</head>
<style>
.tabContentTabs a {
background:none repeat scroll 0 0 #94BBD5;
color:#FFFFFF;
display:block;
font-size:11px;
font-weight:bold;
padding:4px 22px;
text-decoration:none;
}
.tabContentTabs a:visited {
background:none repeat scroll 0 0 #94BBD5;
}
.tabContentTabs a:hover {
background:none repeat scroll 0 0 #8EA4BE;
}
.tabContentTabs a:active {
background:none repeat scroll 0 0 #DBEAF5;
}
.activeTab {
    border: 1px solid #900;
}

</style>
<script>
   function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes.getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes.id == thechosenone) {
                        newboxes.style.display = 'block';
                        var tabEl = document.getElementById(thechosenone + '_tab');
                        tabEl.className = 'tabContentTabs activeTab';
                  }
                  else {
                        newboxes.style.display = 'none';
                        var thisboxid = newboxes.id;
                        var tabEl = document.getElementById(thisboxid + '_tab');
                        tabEl.className = 'tabContentTabs';
                  }
            }
      }
}
</script>

<body>
<table >
   <tr>
      <td>
         <div  class="tabContentTabs" id="newboxes1_tab">
         <a   href="javascript:showonlyone('newboxes1');">Select 1st Form</a>                   
         </div>  
        
      </td>
      <td>
         <div class="tabContentTabs activeTab" id="newboxes2_tab">
            <a  href="javascript:showonlyone('newboxes2');">Select 2nd Form</a>          
         </div>   
       
      </td>    
   </tr>
</table>
<div name="newboxes" id="newboxes1" style=" display: none;"> Hi this is 1st Form</div>
<div name="newboxes" id="newboxes2" style=" display: block;"> Hi this is 2nd Form </div>   
</body>
</html>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices