html頁面內容的收縮和展開效果
阿新 • • 發佈：2019-01-24
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h3{text-align:center;} #content{text-indent:2em;} </style> </head> <body> <h3>習近平匯聚“中國力量”</h3> <span id="content"> 合抱之木，生於毫末；九層之臺，起於壘土。實現中華民族偉大復興是一個長期而艱鉅的過程，需要凝聚磅礴之力， 才能實現質的飛躍。黨的十八大以來，以習近平同志為核心的黨中央高瞻遠矚、統攬全域性，為實現“兩個一百年”奮鬥目標、 實現中華民族偉大復興的中國夢匯聚了強大的“中國力量”。2013年3月17日，北京，第十二屆全國人民代表大會第一次會議 閉幕會上，剛剛當選國家主席的習近平向全世界系統闡述“中國夢”，並道出了這句凝心聚力的話語。他深情地說，“中國夢是民族的夢， 也是每個中國人的夢。只要我們緊密團結，萬眾一心，為實現共同夢想而奮鬥，實現夢想的力量就無比強大。”“只有把人生理想融入國 家和民族的事業中，才能最終成就一番事業。”2013年5月2日，習近平在給北京大學考古文博學院2009級本科團支部全體同學的回信中 寫道。寥寥28個字，字字千鈞——將個人夢融入家國夢，實現個人夢的空間會更大、機會會更多、人生會更精彩。無數個人夢疊加得越高， 距離家國夢的實現也就越近。習近平不厭其煩，一次又一次殷殷囑咐，要“把個人夢與中國夢緊密聯絡在一起”。對青年一代，他寄予厚望： 青年一代有理想、有擔當，國家就有前途，民族就有希望，實現我們的發展目標就有源源不斷的強大力量；對工人階級，他要求大家立足本職、 胸懷全域性，自覺把人生理想、家庭幸福融入國家富強、民族復興的偉業之中，“始終以國家主人翁姿態為堅持和發展中國特色社會主義作出貢獻”； 對國家機關工作人員，他說要克己奉公，廉政勤政，關心人民疾苦，為人民辦實事；對中國人民解放軍，他不止一次發起氣衝雲霄的動員令：匯聚 起強國強軍的磅礴力量，為共同實現“兩個一百年”奮鬥目標、實現中華民族偉大復興的中國夢而不懈奮鬥。 </span> <a href="" id="btn"><<<收縮</a> <script type="text/javascript"> //獲取button按鈕 var btn=document.getElementById('btn'); //獲取p var content=document.getElementById('content'); //獲取p中的內容 var str=content.innerHTML; //定義一個變數，表示當前的狀態（收縮、展開） var onOff=true;// true表示展開 btn.onclick=function(){ if(onOff) { content.innerHTML = str.substr(0,50)+"......"; btn.innerHTML='>>>展開' } else { //說明當前狀態是收縮的，需要展開 content.innerHTML = str btn.innerHTML = '<<<收縮'; } onOff=!onOff; //每點選一次，改變一次展開、收縮狀態 return false; //阻止a標籤的預設事件 } </script> </body> </html>