效果:当文本字数超过9个时,隐藏第九个字之后文本,使用“…显示全部”的标签代替。点击“…显示全部”显示所有文本信息。“…显示全部”变成“收起”。点击“收起”又变回9个字文本。
原理:在一个名为fullText的div标签中存放所有文本,在另一个名为subText的div标签中存放9个字的文本,在一个a标签中实现点击效果。页面初识加载时,将要显示的文本放入一个text变量中,将fullText的div的文本置为空,判断text长度是否大于9,若大于9,在名为subText的div标签中显示前9个字的文本+“…显示全部”。若不大于9,在subText显示全部文本。
点击a标签时,判断a标签的文本内容,若为“…显示全部”,将text变量中的值赋给subText,并将a标签改为”收起”。若a标签中的内容为”收起”,将text变量的前9个值赋给subText并将a标签改为“…显示全部”。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GBK">
<title>隐藏功能</title>
</head>
<body>
<div id="d1"><div id="fullText">以前铿锵有力的灵魂之声,不知道什么时候,被默默沉寂在心底。渴望着黑夜里,能有一双巨大有力的手,将我的冰冷握紧。在这些安静的日子里,一个人无言无语,对着搁置了很久的书,认真的翻阅起来。里面的一些话语,带着禅意,让人顿悟,豁然开明。</div> <div id="subText"></div><a id="btn" onclick="change()"></a></div>
<script>
var text;
function show() {
text = document.getElementById("fullText").innerHTML;
document.getElementById("fullText").innerHTML = "";
document.getElementById("subText").style.float = "left";
document.getElementById("btn").style.float = "left";
if(text.length > 9) {
document.getElementById("subText").innerHTML = text.substring(0, 9);
document.getElementById("btn").innerHTML = "...显示全部";
} else {
document.getElementById("subText").innerHTML = text;
document.getElementById("btn").innerHTML = "";
}
}
function change() {
var t = document.getElementById("btn");
var tt = document.getElementById("subText");
if(t.innerHTML == "...显示全部") {
tt.innerHTML = text;
t.innerHTML = "收起"
} else {
tt.innerHTML = text.substring(0, 9);
t.innerHTML = "...显示全部"
}
}
show();
</script>
</body>
</html>