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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Apply CSS via ECMASCript/JavaScript

    I am attempting to cycyle through a few classes and in my attempt to build a tabbed module.

    I am using the following XHTML:
    Code:
    <div id="moduleName">
    	<ul class="tabs">
    		<li class="tab1"><a href="#" onclick="moduleSwitcher('moduleName', '1'); return false;">panel1</a></li>
    		<li class="tab2"><a href="#" onclick="moduleSwitcher('moduleName', '2'); return false;">panel2</a></li>
    	</ul>
    	
    	<div class="panels">
    		<div class="panel1">
    			panel one
    		</div>
    		<div class="panel2">
    			panel two
    		</div>
    	</div>
    </div>
    And the following for my javascript:
    Code:
    function moduleSwitcher(moduleName, activateNumber) {
    // define active tab/panel
    	var activePanel = "panel" + activateNumber;
    	var activeTab = "tab" + activateNumber;
    
    // obtain module and child nodes
    	var myElementID = document.getElementById(moduleName);
    	var moduleChildren = myElementID.childNodes;
    
    	for( i = 0; i < moduleChildren.length; i++ ) {
    		if ( moduleChildren[i].className == "tabs") {
    			var moduleChildrenChild = moduleChildren[i].childNodes;
    			for( i = 0; i < moduleChildrenChild.length; i++ ) {
    				if ( moduleChildrenChild[i].className == activeTab) {
    					// apply active class to activated tab
    					alert(activeTab);
    				} else {
    					// apply passive class all non-activated tabs
    				}
    			}
    		}
    	}
    } // end function
    Where the two comments are, I want to apply some style to a particular section of xhtml code:
    Code:
    // apply active class to activated tab
    // apply passive class all non-activated tabs
    If div's had IDs I could the following code:
    Code:
    document.getElementById("panel1").style.display='block';
    This would show or hide ( display: none; ).

    I know how to apply css to IDs with JavaScript, but I don't understand how to accomplish this with classes. Any suggestions?

  • #2
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Look into getElementsByTagName('tag'). Which returns an array of all elements of the specified type. Then loop through the array and analyze the class. When you have the desired class, apply the modified style. Does that help?

    Basscyst
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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