li元素上的JavaScript“ onClick”

ogdabou 发表于 Dev

奥格达布

我使用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：

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

感谢大家：）

哈里

删除z-index上的#menuContainer。这将导致#menuContainer落后，因此阻止了点击事件的发生/生效。

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

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