Javascript 如何在刷新时显示页面的随机部分？

如果我有一块通过css样式化的html编码，比如：

<title>Test Title 1</title>
<p>Test Paragraph 1<p>
<a href="test link1">test link 1</a>
<title>Test Title 2</title>
<p>Test Paragraph 2<p>
<a href="test link2">test link 2</a>
<title>Test Title 3</title>
<p>Test Paragraph 3<p>
<a href="test link3">test link 3</a>

测试标题1
试验段落1
测试标题2
试验段落2
测试标题3
试验段3

我希望能够一起随机显示一组零件（即标题1、段落1和链接1）。然后，如果我刷新它随机显示1，2或3。但它们需要保持在一起，就像1的部分不能与3的部分一起显示，以此类推

我知道这很简单，但我不知道如何让它们随机显示在一起。 提前谢谢

使用

html代码：

<div id = " titleBox">
</div>

将此javascript置于onload事件或文档就绪状态

测试链接自行设置

function showTitle(){
   var rand = Math.floor((Math.random() * 3) + 1);
   $("<title>Test Title "+rand+"</title>
      <p>Test Paragraph "+rand+"<p>
      <a href=\"test link\">test link "+rand+"</a>"
    ).appendTo("#titleBox");
}

函数showttitle（）{
var rand=Math.floor（（Math.random（）*3）+1）；
$（“测试标题”+兰德+”
测试段落“+rand+”
"
).附于（“标题栏”）；
}

这是一个简单的javascript版本-没有jquery，只有

HTML

测试标题1
试验段落1

测试标题2
试验段落2

测试标题3
试验段落3

Javascript

//获取有问题的元素的引用，并存储它们。。。
var titles=document.getElementsByTagName（“title”）；
var ps=document.getElementsByTagName（“p”）；
var as=document.getElementsByTagName（“a”）；
//偶尔，运行一个函数。。。
setInterval（函数（）{
//将所有元素设置为“无”
对于（i=0；i而言，一个选项是通过JavaScript生成元素：


JS:

$（函数（）{
风险值数据=[
{
h1:‘测试标题1’，
p:‘试验段落1’，
a:{href:'#测试链接1'，文本：'test Link 1'}
},
{
h1:‘测试标题2’，
p:‘试验段落2’，
a:{href:'#测试链接2'，文本：'test Link 2'}
},
{
h1:‘测试标题3’，
p:‘试验段落3’，
a:{href:'#测试链接3'，文本：'test Link 3'}
}
];
//--随机选择一个项目
var index=Math.floor（Math.random（）*data.length）；
var项目=数据[索引]；
//--创建HTML元素
变量$placeholder=$（“#placeholder”）；
$（''）.text（item.h1）.insertAfter（$placeholder）；
$（“”）.text（item.p）.insertAfter（$placeholder）；
$（''）.attr（'href'，item.a.href）.text（item.a.text）.insertAfter（$placeholder）；
});

HTML:



在本例中，我使用占位符
div
标记项目将插入的位置。
第一步是将所有相关部分分组在一起。请参见下面的HTML。请注意，标题标记已替换为标题标记。标题应位于页面的标题中

<section>
    <h2>Test Title 1</h2>
    <p>Test Paragraph 1</p>
    <a href="test link1">test link 1</a>
</section>
<section>
    <h2>Test Title 2</h2>
    <p>Test Paragraph 2</p>
    <a href="test link2">test link 2</a>
</section>
<section>
    <h2>Test Title 3</h2>
    <p>Test Paragraph 3</p>
    <a href="test link3">test link 3</a>
</section>

下面是jQuery的内容：

$("section").eq(Math.floor(Math.random() * 3)).css("display", "block");

这里是JSIDLE:
你能分享到目前为止你尝试过的东西吗？如果他们需要呆在一起，最好将他们分组在一个
元素中；另外，你应该只有一个
元素，它应该在
中。你能为这个解决方案提供一把小提琴吗？请看更新的代码，这里是JSIDLE:.Kee请记住jQuery的eq（）函数的输入是一个基于0的索引。请尽可能让浏览器完成大部分工作。非常好！谢谢！
$(function () {
    var data = [
        {
            h1: 'Test Title 1',
            p: 'Test Paragraph 1',
            a: { href: '#test-link1', text: 'Test Link 1' }
        },
        {
            h1: 'Test Title 2',
            p: 'Test Paragraph 2',
            a: { href: '#test-link2', text: 'Test Link 2' }
        },
        {
            h1: 'Test Title 3',
            p: 'Test Paragraph 3',
            a: { href: '#test-link3', text: 'Test Link 3' }
        }
    ];
    //-- select an item at random
    var index = Math.floor( Math.random() * data.length );
    var item  = data[index];
    //-- create the HTML elements
    var $placeholder = $('#placeholder');
    $('<h1>').text(item.h1).insertAfter($placeholder);
    $('<p>').text(item.p).insertAfter($placeholder);
    $('<a>').attr('href', item.a.href).text(item.a.text).insertAfter($placeholder);
});

<div id="placeholder"></div>

<section>
    <h2>Test Title 1</h2>
    <p>Test Paragraph 1</p>
    <a href="test link1">test link 1</a>
</section>
<section>
    <h2>Test Title 2</h2>
    <p>Test Paragraph 2</p>
    <a href="test link2">test link 2</a>
</section>
<section>
    <h2>Test Title 3</h2>
    <p>Test Paragraph 3</p>
    <a href="test link3">test link 3</a>
</section>

section {
    display: none;
}

$("section").eq(Math.floor(Math.random() * 3)).css("display", "block");