/**
* 由于原生 js *** 作 ByTagName 比较不方便,所以建议通过 id 选择器来完成 *** 作
* 首先可以为每一个 a 标签添加 id,id = "mylink_*"
* 然后在 sel 方法中,使用两个参数,一个是对应的 a 的 mylink_* 中的 *,另外一个就是其中的第几副 img
* 根据 a 标签的 id ,对应 *** 作 a 下对应下标的 img
* 当然,你也可以通过父子节点 parentNode childNode 来完成,但是也比较麻烦
*/
function sel(linkid, imgindex) {
// 先找到 a 标签
var link = document.getElementById("mylink_" + linkid)
// 然后找 a 下的 img list
var imgs = link.getElementsByTagName("img")
var len = imgs.length
if (len > 0) {
for (var i = 0 i < len i++) {
var img = imgs[i]
// 根据下标显示隐藏
if (i.toString() == imgindex.toString()) {
img.style.display = "block"
} else {
img.style.display = "none"
}
}
}
}
</script>
其中,你的 html 中 ul 中的 li 可以修改如下
<li>
<div class="img">
<a id="mylink_1">
<img style="display:block" src="1.jpg" alt="" />
<img style="display:none" src="2.jpg" alt="" />
</a>
</div>
<div>
<span onclick="sel(1,0)">1</span>
<span onclick="sel(1,1)">2</span>
</div>
</li>
<li>
<div class="img">
<a id="mylink_2">
<img style="display:block" src="1.jpg" alt="" />
<img style="display:none" src="2.jpg" alt="" />
</a>
</div>
<div>
<span onclick="sel(2,0)">1</span>
<span onclick="sel(2,1)">2</span>
</div>
</li>
思路:为li对象添加单击事件→事件触发后利用innerHTML获取li的文本。实例演示如下:1、HTML结构GlenTaneJohnRalph2、javascript代码window.onload = function(){var obj_lis = document.getElementById("test").getElementsByTagName("li")for(i=0i欢迎分享,转载请注明来源:内存溢出
评论列表(0条)