Java 脚本代码 (显示更多 - 显示更少)
Java Script code (Show More - Show Less )
我有一个代码,应该显示我的数据库中的数据(传记),但我正在努力将其放在一起,因此任何帮助将不胜感激。
我想做的是让我的页面只显示 500 个字符,比如说在简历上显示 500 个字符,然后当您单击显示更多部分时,它会将内容字符扩展到最大。我还需要扩展显示我内容的框。现在,当单击显示更多时,我两次得到完全相同的文本,但其余的文本却没有来自我的数据库。比你们所有人的帮助,这是我的代码:
<h5>About:</h5>
<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "list-item";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script><p><?php echo $row->biography; ?><a href="javascript:ShowContent('uniquename')" backgorund="orange">
...show more
</a></p><br/>
<a href="javascript:ShowContent('uniquename')" backgorund="orange">
</a>
<div id="uniquename" style="display:none;">
<p><?php echo $row->biography; ?></p>
<a href="javascript:HideContent('uniquename')">
show less
</a>
</div>
当您显示所有内容时,您还应该隐藏第一个内容:
<a href="javascript:ShowContent('uniquename'); this.style.display = 'none'">
Show more....
</a>
它的主要区别是单击show more
时添加this.style.display = "none"
。
此外,使用onclick
事件来实现这一点也很好
嗯,这肯定会发生,因为你在#uniquename
元素中打印完全相同的内容。
如果你想截断你的文本,在你的第一段中只显示它的一小部分,你可以使用 PHP 的 substr 函数。在以下示例中,我使用了 10 个字符的限制:
<?php
$content = 'lorem ipsum dolor sit amet';
if (strlen($content) > 10) {
echo substr($content, 0, 10) . '…';
} else {
echo $content;
}
?>
这将完成您正在寻找的内容:
<body>
<p id="Content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<script>
(function (){
var content = document.getElementById("Content").innerHTML;
var shown;
var hidden;
var html;
if (content.length > 500) {
shown = content.substring(0, 499);
hidden = content.substring(500, content.length);
html = "<div id='"shown'">" + shown + "<span id='"showText'" onclick='"showMore()'" style='"cursor:pointer'">Show More</span></div><div id='"hidden'" style='"display:none;'">" + hidden + "<span id='"hideText'" onclick='"showLess()'" style='"cursor:pointer;display:none;'">Show Less</span></div></div>"
}
else {
shown = content;
html = "<div id='"shown'">" + shown + "</div>"
}
document.getElementById("Content").innerHTML = html;
})()
var showMore = function (){
document.getElementById("hidden").setAttribute("style", "display:block;");
document.getElementById("showText").setAttribute("style", "display:none;");
document.getElementById("hideText").setAttribute("style", "display:block;cursor:pointer;");
}
var showLess = function () {
document.getElementById("hidden").setAttribute("style", "display:none;");
document.getElementById("showText").setAttribute("style", "display:block;cursor:pointer;");
document.getElementById("hideText").setAttribute("style", "display:none;");
}
</script>
</body>
相关文章:
- 不显示带有本地json文件数据的谷歌地图脚本
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- 显示时间的脚本
- 使用服务器端includes检查当前页面是否为主页——如果是,则显示脚本标记
- 谷歌电子表格在多个单元格中显示脚本中的值
- 有没有一个简单的脚本可以向美国/加拿大游客显示脚本1,向其他游客显示脚本2
- JavaScript var 分配一个动态可为空的值显示脚本错误
- 在电子邮件中显示<脚本>标记
- 如何使用 jQuery 将变量从隐藏字段发送到远程 PHP 文件,并在引导模式中显示脚本的结果,而无需刷新
- 重复显示脚本 UI 窗口
- Dreamweaver在PHP文件中显示脚本标签附近的红线
- jQuery显示脚本errorObject预期
- ie8.0显示脚本错误
- 修改显示脚本,使其隐藏子关卡
- 没有显示脚本输出
- Chrome用户代理不显示脚本- CSS修复
- 使用jQueryAjax成功显示脚本
- 在父级顶部显示脚本
- 如何在 HTML 中显示脚本标记而不执行它