<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style type="text/css">
#div1 {
margin: 0 auto;
width: 470px;
height: 260px;
border: 1px solid black;
}
.c1 {
color: palevioletred;
}
#div2 {
margin: 0 auto;
width: 470px;
height: 260px;
text-align: center;
margin-top: 120px;
}
#sp1 {
color: palevioletred;
}
</style>
</head>
<body>
<div id="div1">
<span class="c1">奥林巴斯</span><span class="c2">(30440)</span>
<span class="c1">索尼</span><span class="c2">(30440)</span>
<span class="c1">松下</span><span class="c2">(30440)</span> <br />
<span class="c1">卡西欧</span><span class="c2">(30440)</span>
<span class="c1">科大</span><span class="c2">(30440)</span>
<span class="c1">佳能</span><span class="c2">(30440)</span> <br />
<span class="c1">三星</span><span class="c2">(30440)</span>
<span class="c1">佳能</span><span class="c2">(30440)</span>
<span class="c1">佳能</span><span class="c2">(30440)</span> <br />
<span class="c1">佳能</span><span class="c2">(30440)</span>
<span class="c1">佳能</span><span class="c2">(30440)</span>
<span class="c1">佳能</span><span class="c2">(30440)</span> <br />
<span class="c1">佳能</span><span class="c2">(30440)</span>
<span class="c1">佳能</span><span class="c2">(30440)</span>
<span class="c1">佳能</span><span class="c2">(30440)</span> <br />
<div id="div2">
<span id="sp1">123</span>
</div>
</div>
<script type="text/javascript">
$("#sp1").text("精简显示")
updatecolor();
$("#sp1").click(function() {
if($("#sp1").text() == "精简显示") {
$("#sp1").text("显示全部")
clearcolor()
$("#div1 span:gt(13)").hide();
$("#div1 span:last-child").show();
} else {
$("#div1 span:gt(13)").show();
$("#sp1").text("精简显示")
updatecolor();
}
})
function updatecolor(){
$("#div1 span:contains('奥林巴斯')").css("color", "red");
$("#div1 span:contains('奥林巴斯')+span").css("color", "red");
$("#div1 span:contains('卡西欧')").css("color", "red");
$("#div1 span:contains('卡西欧')").next().css("color", "red");
}
function clearcolor(){
$("#div1 span:contains('奥林巴斯')").removeAttr("style");
$("#div1 span:contains('奥林巴斯')").next().removeAttr("style");
$("#div1 span:contains('卡西欧')").removeAttr("style");
$("#div1 span:contains('卡西欧')").next().removeAttr("style");
}
</script>
</body>
</html>
09-06
1992