SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Sipovo
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change classes and id's on click

    Hi,
    Can someone provide me with good article on this subject?

    I have ul list with links in li elements. There are current id for li and active id for a. When I click on link I want it to get id active, it's parrent li to get id current and all other a's and li's ids to be removed. Of course code should cause change of appearence of these elements.

    I came up with this code, but for some reason, it does not change appearance of elements.

    Code:
    function() startList
    {
    navRoot = document.getElementById("navlist");
    for (i=0; i<navRoot.childNodes.length; i++)
    	{
    	node = navRoot.childNodes[i];
    	if (node.nodeName=="LI")
    		{
                     node.onclick=function()  
    {	  							for (i=0; i<navRoot.childNodes.length; i++)  								{  									cose = navRoot.childNodes[i];  									  									cose.id = null;  									cose.childNodes[0].id=null;  								}  							  							this.id="active";  							this.childNodes[0].id="current";  						}					  					}  				}  			  		}  		window.onload=startList;  		</script>

  2. #2
    SitePoint Member GreboGuru's Avatar
    Join Date
    Jun 2006
    Location
    Wensleydale, UK
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Not sure what your trying to achieve. Could you post more code?

    Thanks
    Is lunch here?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Sipovo
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    More code would complicate things.

    I have 4 links styled with css. Active link is styled differently. I want on click to load page in IFrame and to change clicked link to look 'active' and all others to look 'inactive'.

    This should be achieved by setting id or class of active (clicked) link and it's parent li to some values, and removing id or class from other links and their respective parent li.

  4. #4
    SitePoint Member GreboGuru's Avatar
    Join Date
    Jun 2006
    Location
    Wensleydale, UK
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    OK I guess this is what your trying to achieve

    Code:
    function startList()
    {
    	navRoot = document.getElementById("navlist");
    	for (i=0; i<navRoot.childNodes.length; i++)
    	{
    		node = navRoot.childNodes[i];
    		if (node.nodeName == "LI")
    		{
        		node.onclick = function()
        		{  		
    				liList = navRoot.getElementsByTagName("LI");
    
        			for (i = 0; i < liList.length; i++)  								
        			{  									
        				cose = liList[i];  									  									
        				cose.id = null;  									
       					cose.childNodes[0].id = null;  								
        			}  							  							
        			
        			this.id = "current";  							
        			this.childNodes[0].id = "active";  						
        		}					  					
        	}  				
    	}	  			  		
    }  		
    
    window.onload = startList;
    HTML Code:
    <style type="text/css">
    ul li#current	{	font-weight: bold;	}
    ul li a#active	{	color: red;		}
    </style>
    HTML Code:
    <ul id="navlist">
    	<li id="current"><a id="active" href="#">option 1</a></li>
    	<li><a href="#">option 2</a></li>
    	<li><a href="#">option 3</a></li>
    	<li><a href="#">option 4</a></li>
    </ul>
    Hope this helps

    Scott
    Is lunch here?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Sipovo
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes that is it. I put () after function instead of after startList :-)


Bookmarks

Posting Permissions

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