li元素上的JavaScript“ onClick”

Question

我使用ul和制作了一个菜单栏，li我希望一些onClick事件链接到JavaScript函数。

但这不起作用，单击菜单根本没有任何作用。

该函数在我已经使用的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：

<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>

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.*/
}

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

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

#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;
}

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

似乎删除z-index: -1会破坏box-shadow您网站上的效果，因为它将元素重新带到了最前面。为了克服这个问题，请在原始答案中提到的项目中#titleContainer以及#mainContent删除后添加以下行

z-index: 2; 
position: relative; 

这将使阴影恢复原状，因为#menuContainer我们将其他两个放在前面而不是发送回去。