js控制节点小结
程序员文章站
2024-01-20 19:49:22
...
DOM节点操作
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
div{
margin-left: auto;
margin-right: auto;
width: 420px;
}
</style>
<title></title>
</head>
<body>
<h2>js图片库的使用</h2>
<ul>
<li><a href="images/hover1.jpg" title="pic01">图片一</a></li>
<li><a href="images/hover2.jpg" title="pic02">图片二</a></li>
<li><a href="images/hover3.jpg" title="pic03">图片三</a></li>
<li><a href="images/hover4.jpg" title="pic04">图片四</a></li>
</ul>
<div id="picbox"></div>
</body>
<script>
var showbox=document.getElementById("pixbox");
var all=document.getElementsByTagName("a");
for (var i= 0;i<all.length;i++){
all[i].onclick=function(){
var source =this.getAttribute("href");
showbox.setAttribute("src",source);
return false;//控制浏览器默认行为有问题，需要更改
}
}
</script>