html文章字段的隐藏和显示

最新推荐文章于 2025-04-22 11:25:09 发布

原创最新推荐文章于 2025-04-22 11:25:09 发布 · 2.7k 阅读

CC 4.0 BY-SA版权

本文通过HTML和JavaScript实现了一种交互式的文本展示方式，可以让读者点击“详情”按钮查看完整版的《木兰诗》，再次点击“收起”按钮则隐藏详细内容并返回初始状态。

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript">
           function play(){
               alert("aaa");
               var aa = document.getElementById("top2");
               alert("bbb");
               aa.style.display="block";
               document.getElementById("top1").innerHTML="唧唧复唧唧，木兰当户织。不闻机杼声，唯闻";
           }
           function end(){
               var aa = document.getElementById("top2");
               aa.style.display="none";
               document.getElementById("top1").innerHTML="唧唧复唧唧，木兰当户织。不闻机杼声，唯闻....<a href='#' style='color: red;' onclick='play()'>[详情]</a>";
           }
       </script>
   </head>

   <body>
       <div id="top1">
           唧唧复唧唧，木兰当户织。不闻机杼声，唯闻......
           <a href="#" onclick="play()" style="color: red;" id="aa">[详情]</a>
       </div>
       <div style="display: none;" id="top2">唧唧复唧唧，木兰当户织。不闻机杼声，唯闻女叹息。问女何所思，问女何所忆。女亦无所思，女亦无所忆。昨夜见军
           帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。东市买骏马，西市买鞍鞯，南市买
           辔头，北市买长鞭。旦辞爷娘去，暮宿黄河边，不闻爷娘唤女声，但闻黄河流水鸣溅溅。旦辞黄河去，暮至黑山头，不闻爷娘唤女声，
           但闻燕山胡骑鸣啾啾。万里赴戎机，关山度若飞。朔气传金柝，寒光照铁衣。将军百战死，壮士十年归。归来见天子，天子坐明堂。策
           勋十二转，赏赐百千强。可汗问所欲，木兰不用尚书郎，愿驰千里足，送儿还故乡。<a href="#" onclick="end()" style="color: red;">[收起]</a>
       </div>
   </body>

</html>