Question

我正在寻找一个可以一次显示一个DIV并隐藏其余部分的脚本（我在示例中为2个）另外我希望用户来回导航

即

一旦用户点击下一个DIV 1，就会一直显示，直到DIV3 他也应该能够从DIV2-DIV1遍历

我确实觉得这个开发很有意思

提前感谢十亿人......

Answer 1

给出以下HTML：

<div class="sample">div1</div>
<div class="sample">div2</div>
<div class="sample">div3</div>
<a href="#" id="display" class="display">next</a>
<a href="#" id="display1" class="display">prev</a>

以下jQuery似乎可以满足您的要求：

// selects all the divs of class='sample',hides them, finds the first, and shows it
$('div.sample').hide().first().show();

// binds a click event-handler to a elements whose class='display'
$('a.display').on('click', function(e) {
    // prevents the default action of the link
    e.preventDefault();

    // assigns the currently visible div.sample element to a variable
    var that = $('div.sample:visible'),
        // assigns the text of the clicked-link to a variable for comparison purposes
        t = $(this).text();

    // checks if it was the 'next' link, and ensures there's a div to show after the currently-shown one
    if (t == 'next' && that.next('div.sample').length > 0) {
        // hides all the div.sample elements
        $('div.sample').hide();

        // shows the 'next'
        that.next('div.sample').show()
    }
    // exactly the same as above, but checking that it's the 'prev' link
    // and that there's a div 'before' the currently-shown element.
    else if (t == 'prev' && that.prev('div.sample').length > 0) {
        $('div.sample').hide();
        that.hide().prev('div.sample').show()
    }
});

JS Fiddle demo

参考文献：

附录：

快速解释我更改html in the linked demo：

的原因

<div name="sample">div1</div>
<div name="sample">div2</div>
<div name="sample">div3</div>
<a href="#" id="display" value="display">next</div>
<a href="#" id="display1" value="display">prev</div>

name中的div属性没有用处。当然不是如果所有元素都使用相同的名称（它们不是input元素，它们是a链接到的，那么请使用class名称。
value属性没有association with an a element，据我所知，并没有用处。为此，在上面的脚本中，我再次选择使用class名称，因为共享了属性的相同“值”，尽管可以使用data-*属性，并且已经有效了。
结束</div>代码未关闭任何内容，因此将其更改为</a>。

通过显示相应的DIV进行下一个和上一个导航

1 个答案:

附录：