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 5 of 5
  1. #1
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing Classes onClick

    Okies, I know what I want to do, but not how to do it . Basically, when certain menu items are clicked, a list below has its class changed from "invis" to "active".
    Code:
    <ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">Curriculum</a></li>
    	<li><a href="#">School</a></li>
    	<li><a href="#">Parents</a></li>
    	<li><a href="#">Governors</a></li>
    	<li><a href="#">School Tour</a></li>
    </ul>
    
    <ul id="curriculum" class="invis">
    	<li><a href="#">Curriculum Policy</a></li>
    	<li><a href="#">Key Stage 3</a></li>
    	<li><a href="#">Key Stage 4</a></li>
    	<li><a href="#">Exam Results</a></li>
    	<li><a href="#">OFSTED Website</a></li>
    </ul>
    
    <ul id="school" class="invis">
    	<li><a href="#">Staff Details</a></li>
    	<li><a href="#">Contact</a></li>
    	<li><a href="#">Activities</a></li>
    	<li><a href="#">Charity</a></li>
    	<li><a href="#">Students Work</a></li>
    	<li><a href="#">Business &amp; Enterprise College</a></li>
    </ul>
    So, when you click on the top "Curriculum" link, the class of the "Curriculum" list is changed from "invis to "active". When you click the "School" link at the top, the first list's class is changed back to "invis", and the second list's class is changed to "active".

    I'm a complete @$$hat at JavaScript, so any help would be mucho appreciated .

    BTW, I know it's not just mean to be a "write me a script" type forum, but I really do have no idea what to do .

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    here is one way
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    .invis {
    color:#000000;
    }
    .active {
    color:#FF0000;
    }
    </style>
    <script type="text/javascript"><!--
    function changeclass1(mainid,which){
    document.getElementById(''+mainid+'').className=''+which+'';
    }
    function changeclass2(otherid,which1){
    document.getElementById(''+otherid+'').className=''+which1+'';
    }
    //-->
    </script>
    </head>
    
    <body>
    <ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#" onclick="changeclass1('curriculum','active');changeclass2('school','invis');return false;">Curriculum</a></li>
    	<li><a href="#" onclick="changeclass1('school','active');changeclass2('curriculum','invis');return false">School</a></li>
    	<li><a href="#">Parents</a></li>
    	<li><a href="#">Governors</a></li>
    	<li><a href="#">School Tour</a></li>
    </ul>
    
    <ul id="curriculum" class="invis">
    	<li><a href="#">Curriculum Policy</a></li>
    	<li><a href="#">Key Stage 3</a></li>
    	<li><a href="#">Key Stage 4</a></li>
    	<li><a href="#">Exam Results</a></li>
    	<li><a href="#">OFSTED Website</a></li>
    </ul>
    
    <ul id="school" class="invis">
    	<li><a href="#">Staff Details</a></li>
    	<li><a href="#">Contact</a></li>
    	<li><a href="#">Activities</a></li>
    	<li><a href="#">Charity</a></li>
    	<li><a href="#">Students Work</a></li>
    	<li><a href="#">Business &amp; Enterprise College</a></li>
    </ul>
    </body>
    </html>
    this is setup for just two lists
    Last edited by _Aerospace_Eng_; 03-20-2005 at 06:21 PM.

  • #3
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your quick reply, _Aerospace_Eng_ . Okies, how would I go about setting it up for more than 1 list? Teh relevant code is below .
    Code:
    <script type="text/javascript"><!--
    function changeclass1(mainid,which){
    document.getElementById(''+mainid+'').className=''+which+'';
    }
    function changeclass2(otherid,which1){
    document.getElementById(''+otherid+'').className=''+which1+'';
    }
    function changeclass3(otherid,which1){
    document.getElementById(''+otherid+'').className=''+which1+'';
    }
    function changeclass4(otherid,which1){
    document.getElementById(''+otherid+'').className=''+which1+'';
    }
    //-->
    </script>
    
    .....
    
    
    <ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#" onclick="changeclass1('curriculum','selected');changeclass2('school','unselected');changeclass3('parents','unselected');changeclass4('governors','unselected');return false;">Curriculum</a>
    					<ul id="curriculum" class="unselected">
    						<li><a href="#">Curriculum Policy</a></li>
    						<li><a href="#">Key Stage 3</a></li>
    						<li><a href="#">Key Stage 4</a></li>
    						<li><a href="#">Exam Results</a></li>
    						<li><a href="#">OFSTED Website</a></li>
    					</ul>
    				</li>
    				<li><a href="#" onclick="changeclass1('curriculum','unselected');changeclass2('school','selected');changeclass3('parents','unselected');changeclass4('governors','unselected');return false;">School</a>
    					<ul id="school" class="unselected">
    						<li><a href="#">Staff Details</a></li>
    						<li><a href="#">Contact</a></li>
    						<li><a href="#">Activities</a></li>
    						<li><a href="#">Charity</a></li>
    						<li><a href="#">Students Work</a></li>
    						<li><a href="#">Business &amp; Enterprise College</a></li>
    					</ul>
    				</li>
    				<li><a href="#" onclick="changeclass1('curriculum','unselected');changeclass2('school','unselected');changeclass3('parents','selected');changeclass4('governors','unselected');return false;">Parents</a>
    					<ul id="parents" class="unselected">
    						<li><a href="#">School Day</a></li>
    						<li><a href="#">Holiday/Term Dates</a></li>
    						<li><a href="#">Prospectus 2003-2004</a></li>
    						<li><a href="#">Newsletters</a></li>
    						<li><a href="#">Map</a></li>
    					</ul>
    				</li>
    				<li><a href="#" onclick="changeclass1('curriculum','unselected');changeclass2('school','unselected');changeclass3('parents','unselected');changeclass4('governors','selected');return false;">Governors</a>
    					<ul id="governors" class="unselected">
    						<li><a href="#">Governing Body</a></li>
    						<li><a href="#">PTA</a></li>
    						<li><a href="#">PTA Events</a></li>
    						<li><a href="#">Governors' Reports</a></li>
    						<li><a href="#">School Policies</a></li>
    					</ul>
    				</li>
    				<li><a href="#">School Tour</a></li>
    			</ul>
    Once again, ta very much .

  • #4
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actaully, I got it working now, but thanks for your help .

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    yw see how simple it is when u get a push in the right direction


  •  

    Posting Permissions

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