每次点击时导航并显示单个 div

Question

我有三个 div，当用户点击 "Click to see other Divs" 时，下一个可用的 div 即应该显示 Div2 而当前的 div 应该隐藏。同样，如果用户单击，则应隐藏 Div2 而应显示 Div3。如果用户第 3 次点击并且没有新的 div 可以显示，则应该显示 Div1。

请找到 fiddle : http://jsfiddle.net/0w9yo8x6/56/ 请建议 javascript 更改。

下面是示例 javascript 代码：

  function navigate(){
    alert("navigate");
    document.getElementById('Div1').style.display = 'none';
    document.getElementById('Div2').style.display = 'block';

}

谢谢。

Answer 1

尝试这样的事情：

已编辑（因为不需要后退按钮）：

var location = 1;

function navigate(){
        document.getElementById('Div' + location).style.display = 'none';
        location++;
        document.getElementById('Div' + location).style.display = 'block';
}

它通过变量 location 跟踪显示的页面，从 1 开始，然后假设我们继续前进，它将 Div1 的显示设置为 'none'，然后将 1 添加到 location 变量得到2，然后设置Div2的显示为'block'.

Answer 2

我为您创建了这个快速示例并添加了评论以便于理解。

// Add a "click" event handler to the element
document.getElementById("showDivs").addEventListener("click", function () {

    // Get all div's
    var divs = document.getElementsByTagName("div");

    // Get the visible div
    var visibleDiv;
    for (var i = 0; i < divs.length; i++) {
        var id = divs[i].id;
        var index = divs[i].id.indexOf("Div");
        if (divs[i].style.display === "block" && divs[i].id.indexOf("Div") > -1) {
            visibleDiv = divs[i];
        }
    }

    // Hide the visible div
    visibleDiv.style.display = "none";

    // Get the number of the current div
    var divNum = Number(visibleDiv.id.replace("Div", ""));
            
    // Show the next div
    var nextDiv;
    if (divNum === 3) {
        nextDiv = 1;
    }
    else {
        nextDiv = ++divNum;
    }
    document.getElementById("Div" + nextDiv).style.display = "block";
});

div{border:1px solid black;width:100px;height:100px;text-align:center;}

<input type="button" id="showDivs" value="Click to see other Divs" />
<div id="Div1" style="display: block;">Div 1</div>
<div id="Div2" style="display: none;">Div 2</div>
<div id="Div3" style="display: none;">Div 3</div>
<div id="FixedDiv">Fixed Div</div>

这可以用更少的代码完成，但是，为了便于理解，我使用了很多变量并注释了每一步，这样您就可以看到代码的哪些部分正在执行哪些操作。

编辑

在编辑中，我添加了一个固定的 div，只是为了表明如果页面上还有其他 div 未包含在 div就是那个变化。

--- 编辑 2 jQuery 示例 ---

这是一个 jQuery 请求的幻灯片效果示例：

// Add click event handler
$("#showDivs").click(function () {

    // Get the visible div
    var visibleDiv = $("div[id^='Div']:visible")[0];

    // Hide the visible div
    $("#" + visibleDiv.id).slideToggle();

    // Get the number of the current div
    var divNum = Number(visibleDiv.id.replace("Div", ""));

    // Get the number of the next div to show
    var newDiv;
    if (divNum === 3) {
        newDiv = 1;
    }
    else {
        newDiv = ++divNum;
    }

    $("#Div" + newDiv).slideToggle();
});

div{border:1px solid black;width:100px;height:100px;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="showDivs" value="Click to see other Divs" />
<div id="Div1" style="display: block;">Div 1</div>
<div id="Div2" style="display: none;">Div 2</div>
<div id="Div3" style="display: none;">Div 3</div>

每次点击时导航并显示单个 div

navigate and show single div each time onclick

html

javascript