CODEWITHSUNDEEP
phpjavascripthtmlcssdynamic
user1193509
user1193509

Reputation:

Javascript + dynamic menu + current link style (CSS) + PHP based site

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>

Upvotes: 0

Views: 1322

Answers (1)

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14292

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.

Upvotes: 1

Related Questions