单击另一个 div 时，移动到具有类的下一个 div

Posted 2023-02-25

【中文标题】单击另一个 div 时，移动到具有类的下一个 div

【英文标题】：move to next div with class when another div is clicked

【发布时间】：2014-09-24 22:47:32

【问题描述】：

我正在创建一个单页网站，它充当一种书本形式。单击“向下” div 时，我希望当前内容 div 淡出并显示下一个内容 div。我已经让它工作了..但在一定程度上。另外，我需要使用带有长度的 if 语句来确定用户何时到达最后一个 div，以便我可以删除向下的 div。

现在，它也不能完全按照我想要的方式工作。此外，我认为我需要使用 next、length 等。这是我正在使用的快速示例

HTML

<div class="content>
   <h1> page one </h1>
</div>
<div class="content hidden-content>
   <h1> page two </h1>
<div>
<div class="content hidden-content>
   <h1> last page </h1>
</div>
<div class="hover-wrap>
   <div class="down"></div>
</div>

jQuery

$(".hover-wrap").hover(function()
if (!$(".down").hasClass('animated')) 
    $(".down").dequeue().stop().animate( bottom: "0px" , 500);

, function() 
    $(".down").addClass('animated').animate( bottom: "-75px" , 500, "linear", function() 
    $(".down").removeClass('animated').dequeue();
    );
);

var btnNode             = $(".down"),
    btnWrap         = $(".hover-wrap"),
    contentNode     = $(".content"),
    nextContentNode = contentNode.next(".content"),
    endNode             = $(".credit"),
    fadeInSpeed     = 500;


btnNode.on("click", function()

contentNode.hide();

if (nextContentNode.length)
    nextContentNode.fadeIn(fadeInSpeed);

 else  
    contentNode.hide();
    endNode.fadeIn();
    btnWrap.fadeOut();
 
);

这是一个让事情变得更清晰的代码笔！谢谢！

http://codepen.io/Mctowlie/pen/qxdyE

【问题讨论】：

您能更具体地说明您要做什么吗？

【参考方案1】：

这是你想要的吗：http://codepen.io/OxyDesign/pen/rykLI？

JS

$(document).ready(function()
    var btnNode = $(".down"),
        btnWrap = $(".hover-wrap"),
        pages = $('[data-page]'),
        pagesLgth = pages.length,
        fadeInSpeed = 500;

    btnWrap.hover(function() 
        if (!btnNode.hasClass('animated')) 
            btnNode.dequeue().stop().animate(
                bottom: "0px"
            , 500);
        
    , function() 
        btnNode.addClass('animated').animate(
            bottom: "-75px"
        , 500, "linear", function() 
            btnNode.removeClass('animated').dequeue();
        );
    );


    btnNode.on("click", function(e) 
        e.preventDefault();
        var currentPage = pages.filter('.active');
        currentPage.hide().removeClass('active');
        if(currentPage.data('page') < pagesLgth)
            currentPage.next('[data-page]').fadeIn(fadeInSpeed).addClass('active');
        else
            $('[data-page="1"]').fadeIn(fadeInSpeed).addClass('active');
        
    );
);

【讨论】：

有没有我可以通过使用 Div 来实现这一点？样式似乎与部分不同

没关系！！我只是将我以前的代码包装在您使用的部分代码中！非常感谢！！

我更新了 CodePen，我没有检查 css 但我的 css 有错误。这是section 而不是.section。现在它看起来像你的版本。您也可以使用div，但多个h1 在html 中无效，除了在html 5 和section 内部等...这就是我更改标记的原因。