Question

我创建了一个包含ul和li的菜单栏，我想要一些链接到JavaScript函数的onClick个事件。

但它不起作用，点击菜单根本不做任何事情。

该函数在我已经使用的JS文件上，并且我在另一个元素上测试了它，似乎id不能仅在我的li内部工作。

这是HTML：

<div id="header">
    <div id="titleContainer">
        blablabl
    </div>
    <ul id="menuContainer">
        <li class="menuItem" id="videoMenu">
            <a href="#" onClick="showAbout2();"> Video</a>
        </li>
        <li class="menuItem" id="playlistMenu">
            Playlist
        </li>
        <li class="menuItem" id="aboutMenu">
            About
        </li>
        <li class="menuItem" id="controlsMenu">
            Controls
        </li>
    </ul>
</div>

CSS：

#titleContainer
{
    box-shadow: 0px 0px 5px #000;
    color: lightgrey;
    font-size: 20px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
}

#menuContainer
{
    background-color: #333333;
    line-height: 35px;
    margin: 0;
    position: relative;
    text-align: center;
    z-index: -1;
}

#menuContainer li
{
    display: inline;
    list-style: none;
}

JS：

function showAbout2()
{
    console.log("bonjour");
}

解答：

答案是：

删除z-index。

我想点击一个较低层次的元素。所以我会尝试这个http://www.vinylfox.com/forwarding-mouse-events-through-layers/

谢谢大家：）

Answer 1

删除z-index上的#menuContainer。这推动了#menuContainer，因此阻止了点击事件的发生/生效。

#menuContainer
{
    background-color: #333333;
    line-height: 35px;
    margin: 0;
    position: relative;
    text-align: center;
    z-index: -1; /*Remove this line.*/
}

＆＃13;

function showAbout2() {
    console.log("bonjour");
}

＆＃13;

#titleContainer {
    box-shadow: 0px 0px 5px #000;
    color: lightgrey;
    font-size: 20px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
}
#menuContainer {
    background-color: #333333;
    line-height: 35px;
    margin: 0;
    position: relative;
    text-align: center;
}
#menuContainer li {
    display: inline;
    list-style: none;
}

＆＃13;

<div id="header">
    <div id="titleContainer">blablabl</div>
    <ul id="menuContainer">
        <li class="menuItem" id="videoMenu"> <a href="#" onClick="showAbout2();"> Video</a>

        </li>
        <li class="menuItem" id="playlistMenu">Playlist</li>
        <li class="menuItem" id="aboutMenu">About</li>
        <li class="menuItem" id="controlsMenu">Controls</li>
    </ul>
</div>

＆＃13;

以下更新不是原始问题的一部分，而是根据您对答案的评论添加。

似乎删除z-index: -1会破坏您网站上的box-shadow效果，因为它会将元素带回到前面。要解决此问题，请在删除原始答案中提到的项目后将以下行添加到#titleContainer和#mainContent

z-index: 2; 
position: relative;

这样可以恢复阴影，因为我们不会再发送#menuContainer，而是将其他两个放在前面。

Answer 2

删除z-index: -1，这会阻止您点击该链接。

http://jsfiddle.net/w4cE3/

CSS

#menuContainer
{
    background-color: #333333;
    line-height: 35px;
    margin: 0;
    position: relative;
    text-align: center;
}

Answer 3

您需要做的就是遍历list-item元素并添加事件侦听器......

 var l = document.getElementById('menuContainer').getElementsByTagName('li');

 for (var i=0; i<l.length; i++)
 {
  l[i].addEventListener('click', function() {alert('add any function in place of this alert!');},false);
 }

如果您需要更具体的内容，请发表评论。

Answer 4

您必须删除id标签#menuContainer上的z-index。这应该工作

#menuContainer{
background-color: #333333;
line-height: 35px;
position: relative;
text-align: center;
}

li元素上的JavaScript“onClick”

4 个答案:

CSS