...

View Full Version : Stumped on setting a default class for tabs



tryingtolearn
12-25-2007, 02:40 PM
Hi all,
Im down to the last problem on a set of tabs

The problem I am having is the tab image displaying properly for the default page that loads,

I would like for tab 0ne to be in the "current" state when the page loads but switch out when another tab is clicked (Like all the rest do)

I can only get it to either
1. Stay in the current state all the time
or
2. The page loads with the tab 1 info displayed but the tab 1 image isnt in the highlighted state until it is clicked.

I hope this makes sense -
Here is the code I am using.


<style>
.bdg #bdgbody {
PADDING-RIGHT: 0px;
PADDING-LEFT: 25px;
BACKGROUND: #668395;
PADDING-BOTTOM: 10px;
MARGIN: 0px;
FONT: small Verdana, sans-serif;
COLOR: #000;
PADDING-TOP: 10px;
voice-family: inherit;
FLOAT: left;
WIDTH: 100%;
LINE-HEIGHT: normal;
FONT-SIZE: 85%;
}

.bdg {
FONT-SIZE: 85%;
BACKGROUND: url(bg.gif) #369 repeat-x 50% bottom;
FLOAT: left;
WIDTH: 100%;
LINE-HEIGHT: normal
}
.bdg UL {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 10px;
LIST-STYLE-TYPE: none
}
.bdg LI {
PADDING-RIGHT: 9px;
PADDING-LEFT: 0px;
BACKGROUND: url(right.gif) no-repeat right top;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
.bdg A {
PADDING-RIGHT: 7px;
DISPLAY: block;
PADDING-LEFT: 20px;
FONT-WEIGHT: bold;
BACKGROUND: url(left.gif) no-repeat left top;
FLOAT: left;
PADDING-BOTTOM: 4px;
COLOR: #33424B;
PADDING-TOP: 5px;
TEXT-DECORATION: none
}
.bdg A {
FLOAT: none
}
.bdg A:hover {
COLOR: #8DA2B0;
}
.bdg .current {
BACKGROUND-IMAGE: url(right_on.gif)
}
.bdg .current A {
BACKGROUND-IMAGE: url(left_on.gif); PADDING-BOTTOM: 4px; COLOR: #c0c0c0
}
</style>

<script language="JavaScript">
var ids=new Array('bdg1','bdg2','bdg3','bdg4', 'bdg5');
function switchid(id){
hideallids();
showdiv(id);
}
function hideallids(){
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
if (document.getElementById) {
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) {
document.id.display = 'none';
}
else {
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
if (document.getElementById) {
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) {
document.id.display = 'block';
}
else {
document.all.id.style.display = 'block';
}
}
}
LastID = ""
function mOver(obj){
if(LastID != obj.id){
document.getElementById(obj.id).className="current"
}
}

function mOut(obj){
if(LastID != obj.id){
document.getElementById(obj.id).className="default"
}
}

function mClick(obj){
document.getElementById(obj.id).className="current"
if (LastID != obj.id && LastID != ""){
document.getElementById(LastID).className="default"
}

LastID = obj.id

}

function oClear(){

if(LastID!=""){
document.getElementById(LastID).className="default"
LastID=""
}

}
</script>

<div class="bdg">
<ul>
<li id="d1" class="" href="#null" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this)"><a href="javascript:switchid('bdg1');">Link One</a></li>
<li id="d2" class="" href="#null" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this)"><a href="javascript:switchid('bdg2');">Link Two</a></li>
<li id="d3" class="" href="#null" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this)"><a href="javascript:switchid('bdg3');">Link Three</a></li>
<li id="d4" class="" href="#null" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this)"><a href="javascript:switchid('bdg4');">Link Four</a></li>
<li id="d5" class="" href="#null" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this)"><a href="javascript:switchid('bdg5');">Link Five</a></li>
</ul>

<div id="bdgbody">
<!-- #1 -->
<div id="bdg1" style="display:block;">
Link One
</div>
<!-- #2 -->
<div id="bdg2" style="display:none;">
Link Two
</div>
<!-- #3 -->
<div id="bdg3" style="display:none;">
Link Three
</div>
<!-- #4 -->
<div id="bdg4" style="display:none;">
Link Four
</div>
<!-- #5 -->
<div id="bdg5" style="display:none;">
Link Five
</div>
</div>
</div>





Any help would be appreciated.

tryingtolearn
12-27-2007, 09:52 AM
Should I be asking this question in a different location?
Just wondering - new to this forum

Thanks

tryingtolearn
12-27-2007, 11:24 PM
Problem Solved

Change Class="" for d1 to
class="current"

And then change
LastID = ""
To
LastID = "d1"

For anyone interested in the solution.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum