我先用JS写的,<a>点击后没反应,请大神看看,多谢
我先用JS写的,<a>点击后没反应,请大神看看,多谢
2015-07-04
其一:<a href="javascript:void(0)" onclick="subgo();"id="2a" >更多</a> 不能与li同级。
其二:a 点击是有反应的,只不过你是把a自己给显示隐藏了,没有对li进行操作。
帮你写了代码,你可以参考一下:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>挑战题</title> <style type="text/css"> .none{display: none;}; </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <a href="javascript:void(0)" onclick="subgo();"id="2a" >更多</a> </body> <script> var oUl=document.getElementsByTagName("ul")[0]; var oLi=oUl.getElementsByTagName("li"); var q=document.getElementById("2a"); function hide(){ for(var i=4;i<oLi.length-1;i++){ oLi[i].style.display="none"; } } function show(){ for(var i=4;i<oLi.length-1;i++){ oLi[i].style.display="block"; } } hide(); function subgo(){ if(q.innerHTML=="更多"){ q.innerHTML="简化"; show(); }else{ q.innerHTML="更多"; hide(); } } </script> </html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑战题</title>
<style type="text/css">
.none{display: none;};
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="none">4</li>
<li class="none">5</li>
<li>6</li>
<li>7</li>
<a href="javascript:void(0)" onclick="subgo();"id="2a" >更多</a>
</ul>
<script>
function subgo(){
alert(11);
var q=document.getElementById("2a");
if(q.innerHTML=="更多"){
q.innerHTML="简化";
q.style.display="block";
}else{
q.innerHTML="更多";
q.style.display="none";
}
}
</script>
</body>
</html>
举报