<!DOCTYPE?html>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<script?src="http://libs.baidu.com/jquery/1.9.0/jquery.js"?type="text/javascript"></script>
<title>挑戰題</title>
<style?type="text/css">
????div?ul?li{
????????width:100px;
????????height:20px;
????????display:none;
????????}
</style>
<script?type="text/javascript">
$(function(){
????
?????$("li:lt(4)").show();
?????$("li:eq(-1)").show();
???
?????$("li:eq(-1)").click(function(){
?????????if($(this).text()=='簡化'){
?????????????$(this).find('a').html('更多');
?????????????//$("li:lt(4)").show();
?????????????//$("li:eq(-1)").show();
????????????$("li:gt(3)").hide();
????????????
?????$("li:eq(-1)").show();
?????????????
?????????}else
?????????{
?????????$(this).find('a').html('簡化');
?????????$('li').show();
?????????}
?????});
})
????
</script>
</head>
<body>
???<div>
???????<ul>
???????????<li><a?href="javascript:void(0)">0</a></li>
???????????<li><a?href="javascript:void(0)">1</a></li>
???????????<li><a?href="javascript:void(0)">2</a></li>
???????????<li><a?href="javascript:void(0)">3</a></li>
???????????<li><a?href="javascript:void(0)">4</a></li>
???????????<li><a?href="javascript:void(0)">5</a></li>
???????????<li><a?href="javascript:void(0)">6</a></li>
???????????<li><a?href="javascript:void(0)">更多</a></li>
???????</ul>
???</div>?
</body>
</html>
顯示隱藏中間兩個
持續不間斷
2014-10-24 17:45:23
