实现您想要的更好方式

Question

我有3个div标签和1个按钮。我想一次显示一个div标签当单击按钮div2将显示并且div1被隐藏时，当前显示div1。这是我的示例代码：

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="1">Hello</div>
<div id="2">Hi</div>
<div id="3">Bye</div>
<button>Change DIV</button>
</body>

Answer 1

你可以这样试试：

$(document).ready(function () {
    var currentlyShown = 1;
    $('#changeButton').click(function () {
        if (currentlyShown < 3) {
            $('#' + currentlyShown).hide();
            currentlyShown++;
            $('#' + currentlyShown).show();
        } else {
            $('#' + currentlyShown).hide();
            currentlyShown = 1;
            $('#' + currentlyShown).show();
        }
    });
});

工作JsFiddle：http://jsfiddle.net/

但：不建议仅将号码作为ID！此外，你应该使用类。

实现您想要的更好方式

JsFiddle： http://jsfiddle.net/tqEN5/1/

HTML：

<div class="yourClass">Hello</div>
<div class="yourClass">Hi</div>
<div class="yourClass">Bye</div>
<div class="yourClass">Dumb</div>
<button id="changeButton">Change DIV</button>

CSS：

.yourClass {
    display:none;
}
.yourClass:nth-child(1) { /*Change the number here to whatever div should be visible at the beginning*/
    display:block;
}

JS：

$(document).ready(function () {
    var currentlyShown = 1; /*Change the number here to whatever div should be visible at the beginning*/
    $('#changeButton').click(function () {
        $('.yourClass').hide();
        (currentlyShown < $('.yourClass').length ?
             currentlyShown++ :
             currentlyShown = 1
        );
        $('.yourClass:nth-child('+currentlyShown+')').show();
    });
});

通过这样做，它可以更加重复使用+你可以使用超过3 <div>而无需更改代码。

Answer 2

在上述示例的情况下，请参阅this fiddle。

$('button').on('click',function(){   
    //grab the currently active div
    var currentDiv = $('.active');    
    var currentId = parseInt(currentDiv.attr('id'));
    //hide it    
    currentDiv.removeClass('active').addClass('hidden');
    //get the id of the next div in the cycle
    var next = (currentId % $('div').length + 1);
    //show the next div
    $('#'+next).removeClass('hidden')
                .addClass('active');    
});

使用以下CSS：

.hidden{
    display:none; 
}

Answer 3

<body>
<div id="1">Hello</div>
<div id="2" style="display:none;">Hi</div>
<div id="3" style="display:none;">Bye</div>
<button>Change DIV</button>
</body>

$(function(){
    var count = 0;
    $("button").click(function(){
        count++;
        if (count % 3 == 0) {
            $("#1").css("display",true);
            $("#3").css("display","none");
        }
        if (count % 3 == 1) {
            $("#2").css("display",true);
            $("#1").css("display","none");
        }
        if (count % 3 == 2) {
            $("#3").css("display",true);
            $("#2").css("display","none");
        }
    });
});

的jsfiddle：http://jsfiddle.net/ysrotciv/Q7gh5/

Answer 4

您可以在jsFiddle

找到工作示例

CSS

.hidden {
    visibility: hidden;
}
.visible {
    visibility: visible;
}

HTML

<div id="1" class="visible">Hello</div>
<div id="2" class="hidden">Hi</div>
<div id="3" class="hidden">Bye</div>
<button id="toggleButton">Change DIV</button>

的JavaScript

$(document).ready(function () {
    var shownId = parseInt($('.visible').attr('id'));
    $('#toggleButton').click(function () {
        $('#' + shownId).removeClass('visible').addClass('hidden');
        shownId = shownId >= 3 ? 1 : ++shownId;
        $('#' + shownId).removeClass('hidden').addClass('visible');
    });
});

在div标签之间切换

4 个答案:

实现您想要的更好方式