简体   繁体   English

Javascript +动态菜单+当前链接样式(CSS)+基于PHP的站点

[英]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. 因此,可以在主页的开头找到指向CSS和js文件的外部链接,而内容页面是(php)文档片段,旨在作为内容包含在主页中。

On the client side, I would like for my menu to function dynamically using Javascript. 在客户端,我希望菜单可以使用Javascript动态运行。 I already use CSS to style the :hover , :active , and :visited pseudoclasses. 我已经使用CSS设置了:hover:active:visited伪类的样式。 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. 我编写了js,为链接设置了onclick事件,并在外部链接了脚本。

The problem 问题

Firebug is detecting the script, but when I click the links the function does not fire. Firebug正在检测脚本,但是当我单击链接时,该功能不会触发。

Code

HTML menu element with inline function call: 具有内联函数调用的HTML菜单元素:

 <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: JavaScript函数:

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: 外部js链接位于主要的PHP页面的头部:

<script type="text/javascript" src="script.js"></script>

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 ie < li > 我猜有两个错误,一个是@Joseph提到的缺失“ =”符号,另外在js代码中,您正在检查其className,而此类“ navLnk”已定义为其父元素,即< li >

So to get worked this either specify the class to anchor element or use below script if you want it for li elements 因此,要开始工作,要么指定用于锚定元素的类,要么如果希望将其用作li元素,请使用以下脚本

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. 希望这会有所帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM