0

我目前拥有它，以便在您单击“页码”编号时更改文本块，但我想添加上一个和下一个按钮。

在这里查看我当前的版本：http: //jsfiddle.net/ZBWqS/

当我开始着手时，我想到的每一个解决方案都会变成一堆无法工作的代码。

抱歉，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>​
4

2 回答 2

0

保留一个变量来存储您所在的位置，递增/递减它，然后根据该变量显示内容。

http://jsfiddle.net/ZBWqS/3/

// hold where we are right now. For previous and next to make sense,
// you have to know where you are.
var current = 1;

// function to go to previous
var prev = function() {
    current -= 1;
    if (current < 1) current = 1; // can't go too far previous
    showContent();
};

// function to go next
var next = function() {
    current += 1;
    if (current > 3) current = 3; // can't go too far next
    showContent();
};

// Update what content we are showing based on the "current" index
var showContent = function() {
    var display;
    for (var i = 1; i <= 3; i++) {
        if (i == current) {
            display = 'block';
        } else {
            display = 'none';
        }
        document.getElementById(i).style.display = display;
    }
};

// bind the prev and next function to the links 
document.getElementById('prev').onclick = prev;
document.getElementById('next').onclick = next;

// Setup the initial state of the content
showContent();
​
于 2012-11-14T01:58:56.103 回答
0

我还构建了你的代码的重构版本，你决定你更喜欢哪一个；）

http://jsfiddle.net/haDAj/

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>​

脚本

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);
}​
于 2012-11-14T02:03:08.650 回答