我先用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>
举报