/**
* 由于原生 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>
刚刚试了一下你的代码，结果是不是和上面图片上这个一样的。首先代码不建议这样写，代码不规范后面很容易报错的，你的ul标签没有结尾。因为整个LI都是超链接，那里面的内容就不可能会被点击到，所以只能做JS跳转。具体代码可以上网查询。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div class=“**”>
<ul>
<li><a href=“#”>登录</a></li>
</ul>
</div>
</body>
</html>
改成我这样
你是<div class=“**”>出问题了要改成<div class=“**”>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）