“仅限简单JavaScript”；“下一步”；及；“以前的”；行动？

我现在有了它，所以当你点击“页面”号时，文本块会发生变化，但我想添加上一个和下一个按钮

请在此处查看我的当前版本：

当我开始使用时，我想到的每一个解决方案都会变成一堆无用的代码

对不起，我的问题是noob JS

<div id="1" style="display: block;">
<p>This is the first block of text</p>
<p class="page">
1 of 3
</p>
</div>

<div id="2" style="display: none;">
<p class="red">This is the second block of text</p>
<p class="page">
2 of 3
</p>
</div>

<div id="3" style="display: none;">
<span>This is the third block of text</span>
<p class="page">
3 of 3
</p>
</div>

<div class="bottom">
<a href="#" onclick="show('1'), hide('2'), hide('3'); return false;">1 </a><a href="" onclick="show('2'), hide('1'), hide('3'); return false;">2 </a><a href="" onclick="show('3'), hide('2'), hide('1'); return false;">3 </a>
</div>
<script>
    function show(id) {
        document.getElementById(id).style.display = 'block';
    }
    function hide(id) {
        document.getElementById(id).style.display = 'none';
    }
</script>​

这是第一个文本块


第1页，共3页

这是第二块文本

第2页，共3页

这是第三段文字

三分之三

功能显示（id）{
document.getElementById（id）.style.display='block'；
}
函数隐藏（id）{
document.getElementById（id）.style.display='none'；
}
​

保留一个变量以存储在您所在的位置，递增/递减它，然后基于该变量显示内容

//保持我们现在的位置。为了让上一个和下一个都有意义，
//你必须知道你在哪里。
无功电流=1；
//函数转到上一页
var prev=函数（）{
电流-=1；
如果（电流<1）电流=1；//不能走得太远
showContent（）；
};
//下一步的功能
var next=函数（）{
电流+=1；
如果（当前>3）当前=3；//下一步不能走得太远
showContent（）；
};
//根据“当前”索引更新我们正在显示的内容
var showContent=函数（）{
var显示；
对于（var i=1；i我还构建了代码的重构版本，您可以决定您更喜欢哪一个；）


HTML

<div id="1" class="pagecontainer" style="display: block;">
<p>This is the first block of text</p>
<p class="page">
1 of 3
</p>
</div>

<div id="2" class="pagecontainer" style="display: none;">
<p class="red">This is the second block of text</p>
<p class="page">
2 of 3
</p>
</div>

<div id="3" class="pagecontainer" style="display: none;">
<span>This is the third block of text</span>
<p class="page">
3 of 3
</p>
</div>

<div class="bottom">
    <a href="#" onclick="prev()">&lsaquo;</a>
    <a href="#" onclick="page('1')">1 </a>
    <a href="#" onclick="page('2')">2 </a>
    <a href="#" onclick="page('3')">3 </a>
    <a href="#" onclick="next()">&rsaquo;</a>
</div>​


这是第一个文本块


第1页，共3页

这是第二块文本

第2页，共3页

这是第三段文字

三分之三

​

脚本

var currentPage = 1;

function page(pg)
{
    var els = document.getElementsByClassName("pagecontainer");
    for (var i = 0; i < els.length; i++)
    {
        var page_of_container = els[i].getAttribute("id");
        els[i].style.display = page_of_container  == pg ? 'block' : 'none';                    
    }

    currentPage = pg;
}

function prev()
{
    if (currentPage <= 1) return;

    page(currentPage -1);
}

function next()
{
    if (currentPage >= document.getElementsByClassName("pagecontainer").length) return;

    page(currentPage + 1);
}​

var currentPage=1；
功能页（pg）
{
var els=document.getElementsByClassName（“pagecontainer”）；
对于（变量i=0；i
您应该在“无”和“”（空字符串）之间切换
display
，以便元素采用其以前的值（默认值或继承值）。只需快速注释：以数字开头的id属性是无效的HTML。
var currentPage = 1;

function page(pg)
{
    var els = document.getElementsByClassName("pagecontainer");
    for (var i = 0; i < els.length; i++)
    {
        var page_of_container = els[i].getAttribute("id");
        els[i].style.display = page_of_container  == pg ? 'block' : 'none';                    
    }

    currentPage = pg;
}

function prev()
{
    if (currentPage <= 1) return;

    page(currentPage -1);
}

function next()
{
    if (currentPage >= document.getElementsByClassName("pagecontainer").length) return;

    page(currentPage + 1);
}​