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
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question need to change class ids with function

    I currently have this snippet:
    Code:
    <ul id="buttons" class="sortable boxy clickable">
    		<li>
    			<div class="num">132</div>
    			<div class="Authenticating"><a href="http://www.google.com" onclick="pop(this.href, 132); return false;">James Herreid</a></div>
    			<div class="clear">&nbsp;</div>
    		</li>
    		<li id="selected">
    			<div class="num">84</div>
    			<div class="Authenticating"><a href="http://www.yahoo.com" onclick="pop(this.href, 84); return false;">Daniel Thurgood</a></div>
    			<div class="clear">&nbsp;</div>
    		</li>
    now, when the function pop(url, number) runs, I need it to set the class of the li that was just clicked to selected, and remove the selected class from the previous selection

    how can I do this... changing class names is ok, but the general html layout needs to remain.

    ?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .Authenticating{
     background-color:red;width:200px;
    }
    
    .Authenticating2{
     background-color:blue;width:100px;
    }
    /*]]>*/
    </style>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    function pop(obj,cls){
    }
    
    function SwapClass(obj,cls){
     var div=obj;
     while (div.tagName!='DIV'&&div.parentNode){
      div=div.parentNode;
     }
     if (div.tagName!='DIV'){ return; }
     var ul=obj;
     while (ul.tagName!='UL'&&ul.parentNode){
      ul=ul.parentNode;
     }
     if (ul.tagName!='UL'){ return; }
     if (ul.div){
      if (ul.div!=div){ ul.div.className=ul.div.cls; }
     }
     if (!div.cls){ div.cls=div.className; }
     div.className=(div.className==div.cls)?cls:div.cls;
     ul.div=div;
    
    
    }
    /*]]>*/
    </script>
    </head>
    
    <body>
    <ul id="buttons" class="sortable boxy clickable">
    		<li>
    			<div class="num">132</div>
    			<div class="Authenticating" onclick="SwapClass(this,'Authenticating2');" ><a href="http://www.google.com" onclick="pop(this.href, 132); return false;">James Herreid</a></div>
    			<div class="clear">&nbsp;</div>
    		</li>
    		<li id="selected">
    			<div class="num">84</div>
    			<div class="Authenticating" onclick="SwapClass(this,'Authenticating2');" ><a href="http://www.yahoo.com" onclick="pop(this.href, 84); return false;">Daniel Thurgood</a></div>
    			<div class="clear">&nbsp;</div>
    		</li>
    </ul>
    </body>
    
    </html>
    Last edited by vwphillips; 05-31-2006 at 05:51 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Code:
    <script type="text/javascript">
    function LI_linkClicked(p_a)
    {
      /**************************
       *** Local Variables ***/
    
      var li;
      var ul;
      var counter;
      var items;
    
      /*** End Local Variables ***
       *******************************/
    
      li = p_a.parentNode.parentNode;
      ul = li.parentNode;
    
      pop(p_a.href, Number(li.getElementsByTagName("div")[0].innerHTML));
    
      items = ul.getElementsByTagName("li");
      counter = 0;
      itemCount = items.length
    
      while (counter < items.length && items[counter].className != 'selected')
        ++counter;
    
       if (counter < items.length)
         items[counter].className = '';
    
       li.className = 'selected';
    
      return false;
    }
    </script>
    
    <ul id="buttons" class="sortable boxy clickable">
    		<li>
    			<div class="num">132</div>
    			<div class="Authenticating"><a href="http://www.google.com" onclick="return LI_linkClicked(this);">James Herreid</a></div>
    			<div class="clear">&nbsp;</div>
    		</li>
    		<li class="selected">
    			<div class="num">84</div>
    			<div class="Authenticating"><a href="http://www.yahoo.com" onclick="return LI_linkClicked(this);">Daniel Thurgood</a></div>
    			<div class="clear">&nbsp;</div>
    		</li>


  •  

    Posting Permissions

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