SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Location
    UK
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Changing class of a parent

    Hello
    Can someone give me a few pointer with this, I am inexperienced with Javascript though I have tried.

    I need to change the class of the 'a' tag within the li that has the nested ul

    e.g

    HTML Code:
    <div id="menu-container">
    <ul class="main-menu">
    <li>Link 1<a class="menu"></a></li>
    <li>Link 2<a class="menu"></a></li>
    <li>Link 3<a class="menu"></a>
    <ul class="sub-menu">
    <li>Sub Link 1<a class="active-menu"></a></li>
    <li>Sub Link 2<a class="menu"></a></li>
    </ul>
    </li>
    <li>Link 1<a class="menu"></a></li></ul></div>
    I need to change it to "active-menu" and the nested a to "menu". I cant change the HTML at all, I wish I could.

    Thanks in advance

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You seem to have classitis. You don't need the "menu" class. Use descendant selectors, e.g. ".main-menu a", instead.

    I recommend the Suckerfish Menu System. The two variants at positioniseverything.net have some extra benefits not found in the other variants.
    http://www.htmldog.com/articles/suckerfish/dropdowns/
    http://www.positioniseverything.net/css-dropdowns.html
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Location
    UK
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Kravvitz
    Thanks for your advice. Your absolutely right about classitis, but in this case I cannot change any HTML thats why I am thinking of using Javascript.
    I will have a look at those links.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick demo which illustrates how to traverse a UL and find every LI which contains a nested UL:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <script type='text/javascript' src='../lib/xgetelementbyid.js'></script>
    <script type='text/javascript' src='../lib/xwalkul.js'></script>
    <script type='text/javascript' src='../lib/xfirstchild.js'></script>
    <script type='text/javascript' src='../lib/xnextsib.js'></script>
    <script type='text/javascript'>
    window.onload = function()
    {
      var con = xGetElementById('menu-container');
      var ul = xFirstChild(con, 'ul');
      xWalkUL(ul, null, iter);
    }
    function iter(p, li, c, d)
    {
      // alerts the className of the 'A' contained in every LI which contains a nested UL
      if (c) alert(xFirstChild(li, 'a').className);
      return true;
    }
    </script>
    </head>
    <body>
    
    <div id="menu-container">
    <ul class="main-menu">
      <li>Link 1<a class="menu"></a></li>
      <li>Link 2<a class="menu"></a></li>
      <li>Link 3<a class="menu-test-1"></a>
        <ul class="sub-menu">
          <li>Sub Link 1<a class="active-menu"></a></li>
          <li>Sub Link 2<a class="menu"></a></li>
        </ul>
      </li>
      <li>Link 4<a class="menu"></a></li>
      <li>Link 5<a class="menu-test-2"></a>
        <ul class="sub-menu">
          <li>Sub Link 3<a class="active-menu"></a></li>
          <li>Sub Link 4<a class="menu"></a></li>
        </ul>
      </li>
    </ul>
    </div>
    
    </body>
    </html>


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
  •