时间:2021-07-01 10:21:17 帮助过:8人阅读
运行效果截图如下:
具体代码如下
一、来看一下主体框架程序:
点击查看全文
上面程序布局需要注意的是名字为“content”的div里面的内容需要与省略号“. . .”以前的文字保持一致,也就是重复一段文字。
原因:因为省略号“. . .”以前的文字会在点击“查看全文”按钮的时候隐藏,如果不隐藏省略号“. . .”之前的文字的话,它会在点击“查看全文”按钮后“. . .”不消失,这样文章就不能顺利阅读了~~~~
二、下面来看看样式:
*{ padding: 0; margin: 0; } .showAll{ width: 60%; margin: 0 auto; background: #ecebeb; padding: 10px; } .showAll .title{ font-size: 20px; font-weight: bold; color:#af0015; } .showAll .author{ color: #a1a1a1; margin: 12px 0; } .showAll .content{ display: none; //注意这里让文字不显示 }
上面需要注意的是需要给名字为“content”的div隐藏,这样点击“查看全文”按钮后才可以触发显示事件。
三、Jquery程序:
希望本文所述对大家学习jquery程序设计有所帮助。