Question

当涉及到JS时，我并不那么强大。但是我编写了一些代码，它完全符合我的要求。

function showDiv(divName)
{
    var divnameids = new Array();
    divnameids[0] = "accessories";
    divnameids[1] = "connections";
    divnameids[2] = "features";
    divnameids[3] = "phones";
    divnameids[4] = "services";
    for (var i=0;i<divnameids.length;i++)
    {
        if (divnameids[i] == divName) divnameids.splice(i, 1);
    }
    for (var i=0;i<divnameids.length;i++)
    { 
        document.getElementById(divnameids[i]).style.display='none';
        document.getElementById('but' + divnameids[i]).className = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
    }   
    document.getElementById('but' + divName).className = "quotebutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
    document.getElementById(divName).style.display='block';
}

这可以工作，但相应的按钮会触发像标签一样打开和关闭div。但是我现在希望使用另一个按钮按顺序跳过这些div（与JS数组的顺序相同）

有人会建议这样做的最佳方法吗？

Answer 1

此代码应打开每个div，然后关闭前一个div：

var currentPos = 0;

$('#yourButtonId').on('click', function () {
        if (currentPos > 0)
            $('#' + divnameids[currentPos - 1]).hide();
        if (currentPos == 0) // hide the last tab when coming back to the start
            $('#' + divnameids[divnameids.length - 1]).hide();

        $('#' + divnameids[currentPos]).show();
        currentPos += 1;

        // Reset the current position to 0
        if (currentPos >= divnameids.length)
            currentPos = 0;
    });

Answer 2

假设你想要一个纯粹的Javascript解决方案，这是有效的（假设我在你的HTML上的球场）：

function nextDiv() {
    var divnameids = new Array();
    divnameids[0] = document.getElementById("accessories");
    divnameids[1] = document.getElementById("connections");
    divnameids[2] = document.getElementById("features");
    divnameids[3] = document.getElementById("phones");
    divnameids[4] = document.getElementById("services");
    var len = divnameids.length;

    for(var i=0; i < len; i++) {
        if(i == (len - 1)) {
            divnameids[len-1].style.display = 'none';
            divnameids[0].style.display = '';
            break;
        }
        else {
            if(divnameids[i].style.display == '') {
                divnameids[i].style.display = 'none';
                divnameids[i+1].style.display = '';
                break;
            }
        }
    }
}

JSFiddle：http://jsfiddle.net/yjf8w/

Answer 3

    $(document).ready(function(){
    $(".content-box-front").click(function(){
        $(".full-content-back").fadeIn("slow");
        $(".full-content-front").fadeIn("slow");
        $(".content-box-front").fadeOut("slow");
        $(".content-box-back").fadeOut("slow");
    });

});

    $(document).ready(function(){
    $(".full-content-front").click(function(){
        $(".full-content-back").fadeOut("slow");
        $(".full-content-front").fadeOut("slow");
        $(".content-box-front").fadeIn("slow");
        $(".content-box-back").fadeIn("slow");
    });

});

这应该有助于将div的名称放在full-content ....的位置

Javascript跳过隐藏/显示div

3 个答案: