導航:首頁 > 萬維百科 > 網頁展開顯示更多設計

網頁展開顯示更多設計

發布時間:2020-10-11 14:58:31

1、網頁製作中,文字內容太多,不想全在本頁上顯示,點擊上面「更多」,就能看到全部內容,這個要怎麼做?

用js寫個腳本,展開收起的方式:我把代碼黏上,您可以試試:
【一、代碼部分】
<div id="hutia">
1.即使生氣,還是忍不住關心你,這才是真正愛你的人!
2.愛一個人,其實很簡單。他讓你流淚,讓你失望,盡管這樣,他站在那裡,你還是會走過去牽他的手,不由自主。
3.你拿了自己一生的幸福做賭注,要跟著我,你是這個世界上唯一這樣信任我的人,我怎麼捨得讓你輸。
4.女人只會欺負對她好的男人,因為她知道即使他再委屈也不會離開她。一點點語錄網
5.世界上最美妙的一件事,就是當你擁抱一個你愛的人,他竟然把你抱得更緊。
6.愛你就是,見不到你的時候,心裡有好多話想和你說;你在身邊時,覺得得靜靜地靠近你,即使不說話,也很好。
7.相遇是一種美麗,相識是一種歡心,而相知是一種幸福。
</div>
【二、js部分】
<script type="text/javascript">
(function(){
var o = document.getElementById("hutia");
Subt(o);
})();
function Subt(obj){
var s = obj.innerHTML;
var p = document.createElement("span");
var n = document.createElement("a");
p.innerHTML = s.substring(0,100);
n.innerHTML = s.length > 100 ? "...展開" : "";
n.href = "###";
n.onclick = function(){
if (n.innerHTML == "...展開"){
n.innerHTML = "收起";
p.innerHTML = s;
}else{
n.innerHTML = "...展開";
p.innerHTML = s.substring(0,100);
}
}
obj.innerHTML = "";
obj.appendChild(p);
obj.appendChild(n);
}
</script>

與網頁展開顯示更多設計相關的知識