里面的<ul> <li>这些标签本质显示要怎么设置呢？
想要在页面中显示一句话，例如：初始时:<ul>元素中仅显示5个<li>元素,其中包含还包括最后一个<li>元素,<a>元素中的显示"更多"字符.
里面的<ul> <li>这些标签本质显示要怎么设置呢？
3 回答
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑战题</title>
<style>
li{display:none;}
.show{display:block;}
</style>
<script src="https://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body>
<ul>
<li class="show">item01</li>
<li class="show">item02</li>
<li class="show">item03</li>
<li class="show flag">item04</li>
<li>item05</li>
<li>item06</li>
<li>item07</li>
<li>item08</li>
<li>item09</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
<li>item16</li>
<li>item17</li>
<li>item18</li>
<li>item19</li>
<li class="show">item20</li>
</ul>
<a href="#">更多</a>
<script>
$("a").click(function(){
var $this = $(this),
val = $this.html();
if(val === '更多'){
$this.html('简化');
$('li').addClass('show');
}else{
$this.html('更多');
$('li.flag~li').removeClass('show');
$('li:last-child').addClass('show');
}
return false;
});
</script>
</body>
</html>
<!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>
<script type="text/javascript">
function show(){
$("li").show();
$("[type='button']").attr("onclick","hide()");
$("[type='button']").val('简化');
}
function hide(){
$("li:eq(4)").hide();
$("li:eq(5)").hide();
$("[type='button']").val('更多');
$("[type='button']").attr("onclick","show()");
}
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li style="display:none;">5</li>
<li style="display:none;">6</li>
<li>7</li>
</ul>
<input type="button" onclick="show();" value="更多"/>
</body>
</html>通过show()和hide()来控制显示和隐藏，这是以前做的时候写的，楼主可以作为参考看下
举报
0/150
提交
取消
