0

说到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 数组的顺序相同）

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

4

3 回答 3

1

假设您想要一个纯 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/

于 2013-09-05T15:25:52.557 回答
1

此代码应打开每个 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;
    });
于 2013-09-05T14:57:42.130 回答
0 
    $(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.... 的位置

于 2013-09-05T14:53:01.253 回答