3z3*_*etm 3 html javascript css
这里的目标是 1.gif 的 onclick，所有具有 .panel1 类的内容消失（style.display.none），并且所有具有 .panel2 类的内容都变得可见（style.display.inline）
我是新手......所以我认为这只是“ ”或“”的语法问题
<!DOCTYPE html>
<html>
<head>
<title>main</title>
<meta charset="utf-8">
<style type="text/css">
.panel1 {display:inline;}
.panel2 {display:none;}
</style>
<script type="text/javascript">
function panelTransition(panelOut,panelIn)
{
document.getElementByClass(panelIn).style.display="inline";
document.getElementByClass(panelOut).style.display="none";
}
</script>
</head>
<body>
<img class="panel1" src=1.gif onclick="panelTransition(panel1,panel2)" />
<img class="panel2" src=2.gif />
</body>
</html>
没有getElementByClass。它是getElementsByClassName，并且它返回一个项目数组，因此您需要修改代码以循环它们。
function panelTransition(panelOut, panelIn) {
var inPanels = document.getElementsByClassName(panelIn);
for (var i = 0; i < inPanels.length; i++) {
inPanels[i].style.display = 'inline';
}
var outPanels = document.getElementsByClassName(panelOut);
for (var i = 0; i < outPanels.length; i++) {
outPanels[i].style.display = 'none';
}
}
如果您使用 JavaScript 库（例如 jQuery），这会更容易做到。另外，正如已经提到的，您需要在您的参数周围加上引号panelTransition。
<img class="panel1" src=1.gif onclick="panelTransition('panel1', 'panel2')" />
<img class="panel2" src=2.gif />