3

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

IE

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

我确实觉得这个发展很有趣

http://jsfiddle.net/meetrk85/Y7mfF/

提前十亿谢谢......

4

1 回答 1

3

给定以下 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 小提琴演示

参考:


附加物:

快速解释为什么我在链接的演示中更改了 html

<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属性在 a 中div毫无用处。如果所有元素都共享相同的名称,则肯定不是(它们不是input元素,它们由 链接到a,所以使用class名称)。

  • value 属性与element没有关联a,据我所知,它没有任何用途。为此,在上面的脚本中,我再次选择使用class名称,因为属性的相同“值”是共享的,尽管data-*可以使用属性,并且该属性是有效的。

  • 结束</div>标签没有关闭任何东西,所以它们被改为</a>.

于 2012-04-27T19:31:48.077 回答