Question

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

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

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

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

如何在“margin-left：-999px;”上点击按钮时这样做？更改为“margin-left：0px;”或任何其他价值。

Answer 1

这应该有效：

<ul id="myul">
...
</ul>

<img onclick="changeMargin()" src="button.png">

<script>
function changeMargin ()
{
    document.getElementById("myul").style.marginLeft="0px";
}
</script>

Answer 2

或jQuery方式

<ul id="myul">
...
</ul>
<img id="img" src="button.png">

<script>
$(function() {
    $('#img').click(function(){
          $('#myul').css('marginLeft','0px')
    })
});
</script>

我想在单击图像时更改ul元素的“margin-left”

2 个答案: