SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot keith5885's Avatar
    Join Date
    Jun 2006
    Location
    at my computer
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Using links to change <li> classes

    Hey I have normally only used JavaScript to do little things but I really want to get into it more. This is a problem I have and I hope it will be a good start for me to understand more.

    HTML Code:
    <script language="javascript">
    function highlightLinks(obj) {
       var linkList = document.getElementById("agent15").getElementsByTagName("li");
       for (i = 0; i < linkList.length; i++) {
          linkList[i].className = "";
       }
       obj.className = "selected";
    }
    
    </script>
    
    <div id="agent15"> 
    <ul id="maintab">
    <li id="button1" class="selected">
    <a href="#"  onclick="showhide('agent90');highlightLinks('button1')">Admin</a></li>
    <li id="button2" class="">
    <a href="#" onclick="showhide2('agent90');highlightLinks('button2')">Sales & Marketing Services</a></li>
    <li id="button3" class="">
    <a href="#" onclick="showhide3('agent90');highlightLinks('button3')">Finance & Accounting Services</a></li>
    </ul>
    </div>
    The showhide function is for another function that is working correctly. I kept it there to make sure the syntax is correct for those links.

    I tried a lot of variations here and there to see if I was really close but just messed up on a ' or ; somewhere...

    Some of this is copied from examples I found but it is still not working for me. If you need more of the code let me know.

    Thanks and I am looking forward to start entering the world of Javascript!
    Thanks Sitepoint!

  2. #2
    SitePoint Zealot keith5885's Avatar
    Join Date
    Jun 2006
    Location
    at my computer
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry incase you were wondering what I wanted to do.

    I want the <li> to have the class="selected" when the link is clicked and clear the class values of the other two. I also want the first "Admin" <li> to be selected when the page loads.

    Thanks!
    Thanks Sitepoint!

  3. #3
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    something like?

    <style type="text/css">
    <!--
    /*--><![CDATA[/*><!--*/
    .selected{color:red}
    /*]]>*/
    -->
    </style>
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    function highlightLinks(){
    var a=document.getElementById("maintab").getElementsByTagName('a');
    for(i=0;i<a.length;i++){
    a[i].parentNode.className='';
    a[i].onclick=function(){highlightLinks();this.parentNode.className='selected';}
    }
    }
    if(document.childNodes){window.onload=highlightLinks;}
    //--><!]]>
    </script>
    <ul id="maintab">
    <li><a href="#">Admin</a></li>
    <li><a href="#">Sales & Marketing Services</a></li>
    <li><a href="#">Finance & Accounting Services</a></li>
    </ul>

  4. #4
    SitePoint Zealot keith5885's Avatar
    Join Date
    Jun 2006
    Location
    at my computer
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the Style for selected applies to the <li> so that it will be <li class="selected">
    It can't be in the <a> because it is css formating for a menu.

    That looks more advance then i am used to. If possible try to use the same level in my code example so far but show how it could work?

    I have been going crazy searching around for such examples and trying to learn quickly...

    Thanks for the reply
    Thanks Sitepoint!

  5. #5
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    maybe

    <style type="text/css">
    <!--
    /*--><![CDATA[/*><!--*/
    .selected{color:red}
    /*]]>*/
    -->
    </style>
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    function highlightLinks(){
    var li=document.getElementById("maintab").getElementsByTagName('li');
    for(i=0;i<li.length;i++){
    li[i].className='';
    li[i].onclick=function(){highlightLinks();this.className='selected';}
    }
    }
    function firstselected(){
    document.getElementById('button1').className='selected';
    }
    if(document.childNodes){window.onload=function(){highlightLinks();firstselected();}}
    //--><!]]>
    </script>
    <ul id="maintab">
    <li id="button1" class="selected"><a href="#">Admin</a></li>
    <li><a href="#">Sales & Marketing Services</a></li>
    <li><a href="#">Finance & Accounting Services</a></li>
    </ul>

  6. #6
    SitePoint Zealot keith5885's Avatar
    Join Date
    Jun 2006
    Location
    at my computer
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope doesn't work... did you test it?
    I just did and it doesn't work in your example.
    Thanks Sitepoint!

  7. #7
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    works repair this firstselecte d damaged by cms

  8. #8
    SitePoint Zealot keith5885's Avatar
    Join Date
    Jun 2006
    Location
    at my computer
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yesssssssss!

    Thank you so much.

    I think this menu is awesome now. I haven't seen anything just like it on the web. I will post it in a second to have as a resource for people. The code isn't super clean yet though.
    Thanks Sitepoint!


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
  •