I’ve been trying to do this to no avail 🙁 From what I’ve researched, there are two ways to change the stated class value in JavaScript:
document.getElementById(v).setAttribute(attribute,value);
or
document.getElementById(v).className = value;
However, I tried both and they’re not doing it.
Here’s my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Checklist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/systems_hr/Style%20Library/globalstyles_test.css">
<style type="text/css">
#innerframe {
width: 100%;
height: 63em;
}
</style>
<script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/styles.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
/* I'll clean this one up. Didn't want to play nice with styles.js
var x = 0;
var p = new Array(3)
for (x = 1; x < 4; x++)
{
p[x] = new Image();
p[x].src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-" + x + ".png";
}
*/
var p0 = new Image();
p0.src = "images/id1.png";
var p1 = new Image();
p1.src = "images/id1-1.png";
var p2 = new Image();
p2.src = "images/id1-2.png";
var p3 = new Image();
p3.src = "images/id1-3.png";
var p4 = new Image();
p4.src = "images/id2.png";
var p5 = new Image();
p5.src = "images/id2-1.png";
var p6 = new Image();
p6.src = "images/id2-2.png";
var p7 = new Image();
p7.src = "images/id2-3.png";
var p8 = new Image();
p8.src = "images/id3.png";
var p9 = new Image();
p9.src = "images/id3-1.png";
var p10 = new Image();
p10.src = "images/id3-2.png";
var p11 = new Image();
p11.src = "images/id3-3.png";
var p12 = new Image();
p12.src = "images/id4.png";
var p13 = new Image();
p13.src = "images/id4-1.png";
var p14 = new Image();
p14.src = "images/id4-2.png";
var p15 = new Image();
p15.src = "images/id4-3.png";
function changeFrame (frameSRC)
{
var myFrame = document.getElementById('fraContent');
myFrame.contentWindow.location = frameSRC;
}
function changeTab(tab)
{
alert(tab);
switch(tab)
{
case 0:
document.getElementById("week1").className = "active";
test('week1');
document.getElementById("month1").className = "active";
test('month1');
document.getElementById("day1").className = "current";
test('day1');
case 1:
document.getElementById("day1").className = "active";
document.getElementById("month1").className = "active";
document.getElementById("week1").className = "current";
case 2:
document.getElementById("week1").className = "active";
document.getElementById("day1").className = "active";
document.getElementById("month1").className = "current";
}
}
function test(tab)
{
alert(document.getElementById.id + " " + document.getElementById(tab).className)
}
</script>
</head>
<body>
<table border="0" width="100%">
<tr>
<td colspan="2" align="left">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" class="active" id="day1" onclick="changeTab(0);">FIRST DAY</a></li>
<li><a href="#" class="active" id="week1" onclick="changeTab(1);test('day1');test('week1');test('month1');">FIRST WEEK</a></li>
<li><a href="#" class="active" id="month1" onclick="changeTab(2);">FIRST 30-DAYS</a></li>
</ul>
</div>
<div id="page_viewer">
<table border="0" width="1020px" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/id1.png" style="border: 0px; width: 1000px; height: 72px;" alt="" usemap="#imgTabMap" name="imgTab">
<map id="imgTabMap" name="imgTabMap">
<area shape="rect" alt="" title="" coords="7,11,166,60" href="" name="area1" onclick="changeFrame('D1.html')">
<area shape="rect" alt="" title="" coords="206,10,365,59" href="" target="_self" onMouseOver="changeImageSrc('imgTab','p1')" onMouseOut="changeImageSrc('imgTab','p0')" name="area2" onclick="changeFrame('D2.html')">
<area shape="rect" alt="" title="" coords="405,11,566,59" href="" target="_self" onMouseOver="changeImageSrc('imgTab','p2')" onMouseOut="changeImageSrc('imgTab','p0')" name="area3" onclick="changeFrame('D3.html')">
<area shape="rect" alt="" title="" coords="605,10,763,60" href="" target="_self" onMouseOver="changeImageSrc('imgTab','p3')" onMouseOut="changeImageSrc('imgTab','p0')" name="area4" onclick="changeFrame('D4.html')">
<area shape="rect" alt="" title="" coords="805,9,963,60" href="" target="_self" onMouseOver="changeImageSrc('imgTab','p4')" onMouseOut="changeImageSrc('imgTab','p0')" name="area5">
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
</map>
</td>
</tr>
<tr>
<td width="100%">
<iframe name="fraContent" id="innerframe" src="D1.html" frameborder="0" scrolling="no" width="1000px"></iframe>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
I know there’s a lot of rough-around-the-edges code, but I’m pressed for time, and I’m not that well versed with JavaScript syntax yet.
Here are the specifics of my code and what I’m trying to accomplish:
I use a global css code for the site, so most of my declarations are stored there. I’ve made the javascript code in-house (so to speak) at the moment. If this works, though, I plan to add this to a global JavaScript repository for my site (the styles.js one). I added the jQuery with every intention of using it later on (I haven’t yet because I’m just trying to learn it at the moment).
Ok, now from what you see, this bit of code is just a tabbed interface. Here’s the CSS code for my tabs:
/* CSS Tabs */
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a.active {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #448; }
#navlist li a.active:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a.current {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: 1px solid white;
text-decoration: none;
background: white;
cursor: text;
}
#navlist li a.current:hover {
background: white;
border-bottom: 1px solid white;
cursor: text;
color: #448;
}
#navlist div #content {
font-size: 1em;
}
The tabs are supposed to change the contents of the iframe on click. The problematic JavaScript code’s job is to just simply change the look of the clicked tab. In the above CSS code, that is the class named "current", while the default style is the class "active".
The code that’s supposed to handle the change is changeTab(tab). First, I’ve set all the tabs to the default class "active". When I click on the tab, changeTab is supposed to kick in (also onLoad, but I didn’t add that first). And that’s where I’m having problems. The class values aren’t changing on the target tab.
First, I added some catch codes just to see if the onClick event is functioning (the reason why I added the alert code in the changeTab function). Then, I added a code that lets me see the final values of the class attribute (the test(tab) function). It’s supposed to display the tag’s Id and the value of its class attribute.
When I tried it out, I do get the passed parameter in the changeTab, which tells me that onClick is functioning. But the test tells me that the tag is undefined. As such, the "current" class is being applied to the last tab ("month1") regardless of what tab I click.
My work browser is IE8, and since this is a company intranet site, I don’t need it to be compatible to other browsers as our company wants us to use IE exclusively for work-related tasks.
Please help 🙁 also, if you can recommend alternatives to what I’m doing, please feel free to give them 🙂
You’ve forgot to put
break;in your cases: