Question

我有三个div，当用户点击＆＃34;点击查看其他Div＆＃34;，下一个可用的div，即应显示Div2，并且应隐藏当前div。再次如果用户点击，则应隐藏Div2并显示Div3。如果用户第三次点击并且因为他们没有要显示的新div，则应显示Div1。

请找小提琴：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

我为您创建了这个快速示例，并在评论中添加，因此很容易理解。

＆＃13;

// 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";
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

<强> 修改

在编辑中，我添加了一个固定的div，只是为了表明如果页面上还有其他div没有包含在更改的div中，代码将会起作用

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

这里是幻灯片效果所要求的jQuery示例：

＆＃13;

// 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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试这样的事情：

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

var location = 1;

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

使用变量位置跟踪显示的页面，从1开始，然后让我们说前进，它会将Div1的显示设置为'none'，然后将1添加到location变量以获得2，然后将Div2的显示设置为“阻止”。

每次onclick导航并显示单个div

2 个答案: