jquery add class .active first element on child selection
<p>i use the code below to add the class .active to the site links but i need to add the class active either on the nav menu on top when i click the menu item or one of the childs. For example if i click the tab "admitere" or one of his childs the tab "admitere" must stay selected until i select another tab.</p>

<p>I thought to create an array of all id of the menus and relative sub menus, wrapping the sub menu let's say within a span tag so when a child is selected check it against the url and if inside make the first menu relative tab selected. Now the site highlite the first menu tab based on categories made from dreamweaver templates but i need to do a single dynamic menu out of the template system.</p>

<p>Please help me to see the right way to solve the problem. Thanks in advance.</p>

<p>This is the site <strong>http://www.univagora.ro</strong>.</p>

<pre><code>    &lt;script type="text/javascript"&gt;
    //&lt;![CDATA[
   function setActive() {
   aObj = document.getElementById('content2-colsx').getElementsByTagName('a');
   for(i=0;i&lt;aObj.length;i++) {
   if(document.location.href.indexOf(aObj[i].href)&gt;=0) {
   aObj[i].className='active';
     }
    }
   }
   //]]&gt;
   &lt;/script&gt;
   &lt;script type="text/javascript"&gt;
   //&lt;![CDATA[
   window.onload = setActive;
   //]]&gt;
   &lt;/script&gt; 


       &lt;div id="menu"&gt;
            &lt;ul id="nav"&gt;
              &lt;li id="menu_home"&gt;&lt;a href="../index.html"&gt;home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="../images/dropdown/nav_divider.gif" alt=""&gt;&lt;/li&gt;
              &lt;li id="menu_admitere"&gt;&lt;a href="../admitere/admitere.php?expandable=0"&gt;ADMITERE&lt;/a&gt;
                &lt;div class="nav-active"&gt;&lt;/div&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="../admitere/acte.html?expandable=0"&gt;Acte necesare&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;test third level&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;test third level&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;test third level&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="../admitere/cifre.html?expandable=0"&gt;Cifre de scolarizare&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../admitere/desfasurare.html?expandable=0"&gt;Desfasurarea admiterii&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../admitere/fisa-inscriere.html?expandable=0"&gt;Fisa de &amp;icirc;nscriere candidat&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../admitere/acreditare.html?expandable=0"&gt;Acreditare&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../mesajul.html?expandable=0"&gt;&lt;em&gt;&lt;strong&gt;&amp;#8220; Mesajul Rectorului &amp;#8222;&lt;/strong&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;img src="../images/dropdown/nav_divider.gif" alt=""&gt;&lt;/li&gt;
              &lt;li id="menu_programe"&gt;&lt;a href="../programe-studii/index.html?expandable=1"&gt;PROGRAME DE STUDII&lt;/a&gt;
                &lt;div class="nav-active"&gt;&lt;/div&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="../programe-studii/drept/index.html?expandable=1&amp;amp;subexpandable=0"&gt;Drept&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../programe-studii/politie/index.html?expandable=1"&gt;Politie Locala&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../programe-studii/management/index.html?expandable=1&amp;amp;subexpandable=1"&gt;Management&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../programe-studii/cig/index.html?expandable=1&amp;amp;subexpandable=2"&gt;Contabilitate si Informatica de Gestiune&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../programe-studii/inf-econ/index.html?expandable=1&amp;amp;subexpandable=3"&gt;Informatica Economica&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;span style="font-size:14px;"&gt;&lt;a href="../master/mba-sua.html?expandable=1&amp;amp;subexpandable=4"&gt;&lt;em&gt;&lt;strong&gt;&amp;#8220;&amp;nbsp;Master MBA AGORA&amp;nbsp;&amp;#8222;&lt;/strong&gt;&lt;/em&gt;&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;img src="../images/dropdown/nav_divider.gif" alt=""&gt;&lt;/li&gt;
</code></pre>

<p></p>

<p></p>

<hr>

<p>here we are my friend, now i can have all active elements where i need and also the first tab selected to remember which menu-category or sub menu i am visiting.
Sure the code can be shorter with jquery. This is a draft working solution.
Please post improvements.
Thank you</p>

<h2>At the moment the problem is to activate index.html on first web access, it only works after selecting elements.</h2>

<pre><code>    &lt;head&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;

         function setActive() {
         aObj = document.getElementById('menu').getElementsByTagName('a');
         for(i=0;i&lt;aObj.length;i++) {
         if(document.location.href.indexOf(aObj[i].href)&gt;=0) {
         aObj[i].className='active';
     $(aObj[i]).closest('li.top-level').addClass('activetab');
           }
         }
        aObj2 = document.getElementById('nav').getElementsByTagName('a');
        for(i=0;i&lt;aObj2.length;i++) {
        if(document.location.href.indexOf(aObj2[i].href)&gt;=0) {
        aObj2[i].className='active';
           }
          }
         }

        $(document).ready(function(){
    setActive();
        });

     &lt;/script&gt;
    &lt;head&gt;
</code></pre>

<hr>

<pre><code>       &lt;body&gt;

        &lt;div id="menu"&gt;
    &lt;ul&gt;
        &lt;li class="top-level"&gt;&lt;a href="../index.html" &gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class="top-level"&gt;&lt;a href="../product.html" id="current"&gt;Products&lt;/a&gt;
            &lt;ul&gt;
            &lt;li&gt;&lt;a href="../sub1.html"&gt;item1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="../sub11.html"&gt;item2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="../sub12.html"&gt;item3&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
      &lt;/li&gt;
        &lt;li class="top-level"&gt;&lt;a href="../other.html"&gt;Other&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="../sub2.html"&gt;itemA&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../sub21.html"&gt;itemB&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="../sub22.html"&gt;itemC&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
      &lt;/li&gt;
        &lt;li class="top-level"&gt;&lt;a href="../contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

      &lt;div class="sidebar1"&gt;
      &lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="../index.html"&gt;index&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../product.html"&gt;product&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../contact.html"&gt;contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;

    &lt;body&gt;
</code></pre>

<hr>

<p>and css</p>

<pre><code>    #menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS";
font-size:14px;
font-weight:bold;
}
    #menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
#menu li{
    background:#333333 url("images/seperator.gif") bottom right no-repeat;
    float:left;
    padding:0px;
    }
#menu li a{
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }
#menu li a:hover, #menu ul li:hover a{
        background: #2580a2 url("images/hover.gif") bottom center no-repeat;
        color:#FFFFFF;
        text-decoration:none;
        }
#menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }
#menu li:hover ul{
    display:block;

    }
#menu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
    }
#menu li:hover li a{
    background:none;

    }
#menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
#menu li ul a:hover, #menu li ul li:hover a{
        background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
        border:0px;
        color:#ffffff;
        text-decoration:none;
        }
#menu p{
    clear:left;
    }
    li.activetab{ background-color: #F03 !important;}
</code></pre>
