Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stumped on setting a default class for tabs

    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.
    Code:
    <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.

  • #2
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Should I be asking this question in a different location?
    Just wondering - new to this forum

    Thanks

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Problem Solved

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

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

    For anyone interested in the solution.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •