0

Here's my setup:

I have a modular site which uses dynamic inclusion. The header is required by the main page. The main page is only in charge of rendering content from specific links on the site. Therefore, external links to CSS and js files are found in the head of the main page, and the content pages are (php) document fragments designed to be included as content within the main page.

On the client side, I would like for my menu to function dynamically using Javascript. I already use CSS to style the :hover, :active, and :visited pseudoclasses. I defined two separate classes relating to both active and inactive buttons. I wrote the js, set up onclick events for the links, and externally linked the script.

The problem

Firebug is detecting the script, but when I click the links the function does not fire.

Code

HTML menu element with inline function call:

 <ul>
        <li class="navLnk"><a href="mylinks.php" tabindex="2" accesskey="2" onclick"asgnActv(this)">BANDS</a></li>
        <li class="navLnk"><a href="mylinks.php" tabindex="3" accesskey="3" onclick"asgnActv(this)">RELEASES</a></li>
 </ul>

Javascript function:

function asgnActv(e){
if (e.className == 'navLnk') {
    $lnkArr = document.getElementsByClassName('actvLnk');
    for (i=0; i<$linkArr.length; i++) {
        $linkArr[i].className = 'navLnk';
    }
    e.className = 'actvLnk';
  }
}

External js link in head of main php page:

<script type="text/javascript" src="script.js"></script>
Improve this question
7
  • 1
    You're missing an = sign: onclick= Commented Sep 4, 2012 at 18:29
  • 1
    Don't use intrusive onclick attribute element, do it all in the script [jQuery will save you a lot of time in this]. Commented Sep 4, 2012 at 18:32
  • If that is all I missed!...Oh sheesh... Commented Sep 4, 2012 at 18:33
  • @moonwave99 can you offer me an example? Commented Sep 4, 2012 at 18:35
  • 1
    Ah and first of all - if you click a link you will go to mylinks.php and the page will be reloaded, so you script will have no use. If you want the current section to have a different class, do it server side. Commented Sep 4, 2012 at 18:39

1 Answer 1

Reset to default
1

I guess there is two mistakes one missing "=" sign mentioned by @Joseph and also in the js code you are checking its className whereas this class "navLnk" is defined to its parent element i.e. < li >

So to get worked this either specify the class to anchor element or use below script if you want it for li elements

function asgnActv(e){
   if (e.parentNode.className == 'navLnk') {
     $lnkArr = document.getElementsByClassName('actvLnk');
     for (i=0; i<$linkArr.length; i++) {
       $linkArr[i].className = 'navLnk';
     }
     e.parentNode.className = 'actvLnk';
   }
}

Hope this will help.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is perfect. The only other thing that I did not do was anticipate if none of them are active. I will have to make a check for that, too! Thanks! I am glad it was so simple.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.