我想在单击图像时更改 ul 元素的“左边距”

i want to change the "margin-left" of a ul element when i click on an image

本文关键字：元素 左边 左边距 ul 单击 图像      更新时间：2023-09-26
<html>
<ul>
<li><a href="blocks.html">Blocks</a></li>
<li><a href="tools.html">Tools</a></li>
<li><a href="weapons.html">Weapons</a></li>
<li><a href="Armour.html">Armour</a></li>
<li><a href="Mobs.html">Mobs</a></li>
<li><a href="Food.html">Food</a></li>
</ul>

<img onclick="SomeJavaScriptCode" src="button.png">
</html>

上面是一个简单的导航栏和一个带有不完整的点击功能的图像。 

<style>
ul
{
list-style-type:none;
margin:auto;
padding:0;
float: left;
height:10%;
width:10%;
margin-left: -999px;
}
</style>

在上面你可以看到我移动了页面的UL，所以我不会影响我的其余代码。

我怎样才能做到当按钮被单击"左边距：-999px;"时更改为"左边距：0px;"或任何其他值。

这应该有效：

<ul id="myul">
...
</ul>
<img onclick="changeMargin()" src="button.png">
<script>
function changeMargin ()
{
    document.getElementById("myul").style.marginLeft="0px";
}
</script>

或jQuery方式 

<ul id="myul">
...
</ul>
<img id="img" src="button.png">
<script>
$(function() {
    $('#img').click(function(){
          $('#myul').css('marginLeft','0px')
    })
});
</script>
相关文章：