1

ul我用and制作了一个菜单栏，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 索引。

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

谢谢大家 ： ）

4

4 回答 4

5

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

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

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

z-index: 2; 
position: relative;

这会让影子回来，因为我们不是把影子送#menuContainer回去，而是把另外两个放在前面。

于 2013-09-23T12:53:04.620 回答
3

删除z-index: -1，它会阻止您单击链接。

http://jsfiddle.net/w4cE3/

CSS

#menuContainer
{
    background-color: #333333;
    line-height: 35px;
    margin: 0;
    position: relative;
    text-align: center;
}
于 2013-09-23T12:52:56.353 回答
1

您需要做的就是遍历列表项元素并添加事件侦听器...

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

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

于 2013-09-23T12:54:01.317 回答
0

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

#menuContainer{
background-color: #333333;
line-height: 35px;
position: relative;
text-align: center;
}
于 2017-07-16T03:46:28.563 回答