用ul li触发onclick事件来触发一个函数

时间:2013-07-29 22:53:40

标签: javascript list events onclick

我是编码的新手,我需要帮助才能将onclick事件添加到我的列表中(这应该是一个下拉菜单) -

这是我的清单代码:

<div class="click-nav">

<ul class="clicker">
<ul>
            <li><a href="#">shake</a></li>
            <li><a href="#">shrink</a></li>
            <li><a href="#">melt</a></li>
        <li><a href="#">disperse</a></li>
</ul>     
</ul>
</div>

我想这样做,以便当选择其中一个项目时,会触发一个函数(调用一组特定于所选类别的图像放在div中)。

我也尝试过选择选项并且它工作得很好,但我必须改变它,因为它的顽固设计:

<label>
<select name="alphabets" id="typeface" onchange="myType();">
<option value="shake" selected>shake</option>
<option value="shrink">shrink</option>
<option value="melt">melt</option>
<option value="disperse">disperse</option>
<option value="disintegrate">disintegrate</option>

</select>
</label>

提前感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

您可以为每个''添加onclick,并为每个''调用不同的函数:

<script>
    function shake(){
        alert('Shake');
    }

    function shrink(){
        alert('Shrink');
    }

</script>
<div class="click-nav">

<ul class="clicker">
<ul>
    <li><a href="#" onclick=shake();>shake</a></li>
    <li><a href="#"onclick=shrink();>shrink</a></li>
    <li><a href="#">melt</a></li>
    <li><a href="#">disperse</a></li>
</ul>     
</ul>
</div>

答案 1 :(得分:0)

看到这一点。

<html>
<div id="name">text</div>

<ul><li onclick="chaangeEvenet(this)">A </li><li  onclick="chaangeEvenet(this)">B </li><li  onclick="chaangeEvenet(this)">C </li></ul>
</html>

<script>
var namefield=document.getElementById("name");
function chaangeEvenet(e){
   namefield.innerHTML=e.innerHTML;
}
</script>