Question

我想在.content divs之间导航。

我尝试使用下面的代码执行此操作，但它无法正常工作。

当我点击最后一个div中的链接.next时，所有内容都会消失，而不是再次转到第一个.content div。

当我点击链接prev时，内容消失。

jquery的：

$(".container div").each(function(e) {
    if (e != 0)
        $(this).hide();
});

$(".btn-next").click(function(){
    if ($(".container div:visible").next().length != 0)
        $(".container div:visible").fadeOut(function(){
            $(this).next().fadeIn();
        });
    else {
        $(".divs div:visible").fadeOut(function(){
            $(".divs div:first").fadeIn();
        });
    }
    return false;
});

$(".btn-prev").click(function(){
    if ($(".container div:visible").prev().length != 0)
        $(".container div:visible").fadeOut(function(){
            $(this).prev().fadeIn();
        });
    else {
        $(".container div:visible").fadeOut(function(){
            $(".container div:last").fadeIn();
        });
    }
    return false;
});

Answer 1

我对您的代码做了一些小改动，这是一个有效的例子

HTML：

<div class="container">
    <h2>Title</h2>
    <a href="#" class="btn-prev">Prev</a>
    <a href="#" class="btn-next">Next</a>
    <div>   
        <div class="content">
            <p>test 1</p>
            <p>test 2</p>
            <div class="links">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
            </div>
        </div>

         <div class="content">
            <p>test 2</p>
            <p>test 3</p>
            <div class="links">
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>
        </div>

         <div class="content">
            <p>test 4</p>
            <p>test 5</p>
            <div class="links">
                <a href="#">Link 4</a>
                <a href="#">Link 5</a>
            </div>
        </div>
    </div>
</div>

和JS：

$(".container .content").each(function(e) {
    if (e != 0)
        $(this).hide();
});

$(".btn-next").click(function(){
    if ($(".container .content:visible").next().length != 0)
        $(".container .content:visible").fadeOut(function(){
            $(this).next().fadeIn();
        });
    else {
        $(".container .content:visible").fadeOut(function(){
            $(".container .content:first").fadeIn();
        });
    }
    return false;
});

$(".btn-prev").click(function(){
    if ($(".container .content:visible").prev().length != 0) { 
        $(".container .content:visible").fadeOut(function(){
            $(this).prev().fadeIn();
        });}
    else {
        $(".container .content:visible").fadeOut(function(){
            $(".container .content:last").fadeIn();
        });
    }
    return false;
});

在.content div之间导航

1 个答案: