html中函数不起作用 ，想实现点击按钮显示对应内容
问题描述：
<li οnclick=show1()>
<a class="img"><img src="images/icon1.png"><span>门诊信息管理</span></a>
</li>
<li οnclick=show2()>
<a class="img"><img src="images/icon2.png"><span>实验室信息管理</span></a>
</li>
<li οnclick=show3()>
<a class="img"><img src="images/icon3.png"><span>检验信息管理</span></a>
</li>
<li>
<div class="Aboxa 1">
<div class="h6">门诊信息管理系统</div>
<div class="p"></div>
<div class="images"><p><img src=""></p></div>
</div>
<div class="Aboxa 2">
<div class="h6">实验室信息管理系统</div>
<div class="p"></div>
<div class="images"><p><img src=""></p></div>
</div>
<div class="Aboxa 3">
<div class="h6">检验信息管理系统</div>
<div class="p"></div>
<div class="images"><p><img src=""></p></div>
</div>
</div>
<script>
function show1(){
document.getElementsByClassName("Abox 1").style.display="block";
document.getElementsByClassName("Abox 2").style.display="none";
document.getElementsByClassName("Abox 3").style.display="none";
}
function show2(){
document.getElementsByClassName("Abox 1").style.display="none";
document.getElementsByClassName("Abox 2").style.display="block";
document.getElementsByClassName("Abox 3").style.display="none";
}
function show3(){
document.getElementsByClassName("Abox 1").style.display="none";
document.getElementsByClassName("Abox 2").style.display="none";
document.getElementsByClassName("Abox 3").style.display="block";
}
</script>
想要实现点击
- 里的内容显示对应介绍，以上代码请问哪里有问题？
答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="c" onclick="show1()">
<a class="img"><img src="images/icon1.png"><span>门诊信息管理</span></a>
</button>
<button id="b" onclick="show2()">
<a class="img"><img src="images/icon2.png"><span>实验室信息管理</span></a>
</button>
<button onclick="show3()">
<a class="img"><img src="images/icon3.png"><span>检验信息管理</span></a>
</button>
<li>
<div class="Aboxa 1">
<div class="h6">门诊信息管理系统</div>
<div class="p"></div>
<div class="images">
<p><img src=""></p>
</div>
</div>
<div class="Aboxa 2">
<div class="h6">实验室信息管理系统</div>
<div class="p"></div>
<div class="images">
<p><img src=""></p>
</div>
</div>
<div class="Aboxa 3">
<div class="h6">检验信息管理系统</div>
<div class="p"></div>
<div class="images">
<p><img src=""></p>
</div>
</div>
</div>
<script>
function show1() {
document.getElementsByClassName("Aboxa 1")[0].style.display = "block";
document.getElementsByClassName("Aboxa 2")[0].style.display = "none";
document.getElementsByClassName("Aboxa 3")[0].style.display = "none";
}
function show2() {
document.getElementsByClassName("Aboxa 1")[0].style.display = "none";
document.getElementsByClassName("Aboxa 2")[0].style.display = "block";
document.getElementsByClassName("Aboxa 3")[0].style.display = "none";
}
function show3() {
document.getElementsByClassName("Aboxa 1")[0].style.display = "none";
document.getElementsByClassName("Aboxa 2")[0].style.display = "none";
document.getElementsByClassName("Aboxa 3")[0].style.display = "block";
}
</script>
</body>
</html>
答
1.li标签没有onclick属性
2.getElementsByClassName是个多选的选择器方法，返回的结果是数组
3.你选择器的里面的类名写错了
答
li标签是不能响应onclick事件的，所以可以用div来代替。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<div class="liDiv">
<a class="img"><img src="images/icon1.png"><span>门诊信息管理</span></a>
</div>
<div class="liDiv">
<a class="img"><img src="images/icon2.png"><span>实验室信息管理</span></a>
</div>
<div class="liDiv">
<a class="img"><img src="images/icon3.png"><span>检验信息管理</span></a>
</div>
</div>
<script type="text/javascript">
for(var i=0;i<document.getElementsByClassName("liDiv").length;i++)
{
document.getElementsByClassName("liDiv")[i].addEventListener("click",clickHandler);
}
function clickHandler()
{
alert(event.target.innerText);
}
</script>
</body>
</html>
答
把on去掉 ，click="show3()"
答
还有个问题，你的onclick的on编码不正确