Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

IE CSS/JS Problem

Posted on 2006-07-03
6
Medium Priority
?
872 Views
Last Modified: 2013-11-19
Greetings,

This page works as intended in Firefox 1.5, and for the most part in IE, the only problem being that when a tab is clicked, it does not take on the 'tabActive' CSS class. Can anyone point out what I'm missing?


<html>
<head>
<style>
#tabs a, #tabs a:link, #tabs a:visited {
      text-decoration: none; COLOR: #000099; BACKGROUND: white; BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 2px; MARGIN: 0px; FONT: bold 11px verdana; BORDER-LEFT: #000099 1px solid; CURSOR: hand; BORDER-BOTTOM: #000099 1px solid; TEXT-ALIGN: center;
}

#tabs a:hover, #tabs a.tabActive:hover {
      COLOR: white; BACKGROUND: #000099;
}

#tabs a.tabActive {
      COLOR: #99ccff; BACKGROUND: #000099;
}
#tabCnt1, #tabCnt2, #tabCnt3 {display: block;}
</style>

<script language="javascript">
function getbyID(obj) {  // lazy getElementById();
   return document.getElementById(obj);
}

function last(str) {      // return last char from a string
   return str.substr(str.length-1);
}    

function set_div(idTab,bState) {
   return getbyID(idTab).style.display = bState ? 'block' : 'none';
}

function set_tab(idTab,bState) {
   return getbyID(idTab).className = bState ? 'tabActive' : 'tab';
}

function set_all(bState) {          
   var x = getbyID('tabs').getElementsByTagName('a');
   for (i=0;i<=x.length-2;i++) {
      set_div('tabCnt'+(i+1),bState);
      set_tab(x[i].id,false);
   }
   set_tab('allTabs',bState);
   return true;
}    
                 
function select_tab(idTab) {  
   if (idTab == 'allTabs') {
      set_all(true);
   } else {
      set_all(false);
      set_div('tabCnt'+last(idTab),true);
      set_tab(idTab,true);
   }
}
</script>
</head>
<body>
<div class="vtable" id="tabs" unselectable="on">
  <a class="tab" id="tabNum1" unselectable="on" onClick="javascript:select_tab(this.id);" href="#">General</a>
  <a class="tab" id="tabNum2" unselectable="on" onClick="javascript:select_tab(this.id);" href="#">Hardware</a>
  <a class="tab" id="tabNum3" unselectable="on" onClick="javascript:select_tab(this.id);" href="#">Software</a>
  <a class="tab" id="allTabs" unselectable="on" onClick="javascript:select_tab(this.id);" href="#">All Tabs</a>
</div>
<div id="tabCnt1" class="asdf">General</div>
<div id="tabCnt2" class="asdf">Hardware</div>
<div id="tabCnt3" class="asdf">Software</div>
</body>
</html>
0
Comment
Question by:TheKenman
  • 4
6 Comments
 
LVL 23

Expert Comment

by:apresto
ID: 17032030
what version of IT are you using?

Javascript compatability varies from borowser to browser
0
 
LVL 7

Author Comment

by:TheKenman
ID: 17032103
Using IE 6.
0
 
LVL 7

Author Comment

by:TheKenman
ID: 17032463
Odd, if I remove the HREF from the <A>, then the tabActive sticks, however the :hover breaks as does the cursor:hand. I guess I could script the mouseover but I'd like to keep that in CSS if possible.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 7

Author Comment

by:TheKenman
ID: 17032467
Stupid IE, why must MS reinvent the wheel (when it's already been invented)...
0
 
LVL 36

Accepted Solution

by:
Zyloch earned 1000 total points
ID: 17033314
What you need is this:

#tabs a.tabActive:visited
{
    color: #99ccff;
    background: #000099;
}
0
 
LVL 7

Author Comment

by:TheKenman
ID: 17033429
Wonderful, thanks!
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
Suggested Courses

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question