扩展段（html）用于新闻部分 [英] Expanding paragraph (html) for news section

问题描述

我不知道如何去做这个。我有一个关于我维护的网站的新闻栏目，我想让它显示约10个新闻项目。然后，我想给用户选择点击更多的其余，而少的回到默认。文档是xhtml和CSS，我试图使用尽可能少的javascript。任何想法？

I'm not sure how to go about this. I have a news section on a website I maintain and I'm trying to get it to display about 10 news items. Then I want to give users the option to click "more" for the rest, and the "less" for back to default. The document is xhtml and css and I'm trying to use as little javascript as possible. Any ideas?

推荐答案

如果你想要所有的新闻文章实际上在页面上，只是看不见，从服务器当用户点击更多，并且你不想使用名为JQuery的awesome javascript库，那么我建议你熟悉Javascript方法，document.getElementById。您可以这样使用：

If you want all the news article to actually be on the page, just invisible, versus having to request more from the server when the user clicks more, and you don't want to use the awesome javascript library called JQuery, then I suggest you get familiar with the Javascript method, document.getElementById. You can use it like this:

<a id="moreless" href="javascript:moretoggle()">More</a>
<div>some news</div>
<div id="morediv" style="display:none;">more news</div>

<script>
function moretoggle() {
    document.getElementById("morediv").style.display = document.getElementById("morediv").style.display == "none" ? "block" : "none";
    document.getElementById("moreless").innerHTML = document.getElementById("moreless").innerHTML == "More" ? "Less" : "More";
}
</script>

这篇关于扩展段（html）用于新闻部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！