Javascript 使用ul li单击事件以启动函数_Javascript_List_Events_Onclick

Javascript 使用ul li单击事件以启动函数

javascript list events

Javascript 使用ul li单击事件以启动函数,javascript,list,events,onclick,Javascript,List,Events,Onclick,我对编码还不熟悉，需要帮助将onclick事件添加到我的列表中（应该作为下拉菜单使用）- 这是我的列表的代码： <div class="click-nav"> <ul class="clicker"> <ul> <li><a href="#">shake</a></li> <li><a href="#">shrink</a>&l

我对编码还不熟悉，需要帮助将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>


摇
收缩
熔化
分散
分解

提前感谢您的帮助

您只需将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>


函数shake（）{
警惕（“摇晃”）；
}
函数收缩（）{
警惕（“收缩”）；
}

您可以将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>


函数shake（）{
警惕（“摇晃”）；
}
函数收缩（）{
警惕（“收缩”）；
}

请参见此

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


文本
A
B
C
var namefield=document.getElementById（“名称”）；
函数chaangeEvenet（e）{
namefield.innerHTML=e.innerHTML；
}

请参见此

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


文本
A
B
C
var namefield=document.getElementById（“名称”）；
函数chaangeEvenet（e）{
namefield.innerHTML=e.innerHTML；
}