Question

可能我在帖子标题中无法表达我的问题，但这里是..

假设我有一个父div元素而没有。儿童元素。所有子元素都设置为display：none，我有两个<a>元素，它们是next和previous按钮。我给第一个子元素类激活了。当页面将被加载时，jQuery将检查第一个孩子的可见性是否设置为可见，然后它将禁用后退按钮。但我的问题是，当我点击下一个按钮时，如何将类“激活”分别设置为下一个，当它到达最后一个孩子时，下一个按钮会自动隐藏。

<div class="main">
    <div class="active">First child</div>
    <div>Second child</div>
    <div>Thirdchild</div>
</div>

<a href="" id="back">Back</a>
<a href="" id="next">Next</a>

的CSS：

.main{
    display: none;
}

.main.active{
    display: block;
}

Jquery的：

<script>
    $('document').ready(function () {

        if($('.main div').first().hasClass('active')){
            $("#back").hide();
        }

        /* Next previous **/
        $("#next").click(function(e) {


        });

        $("#back").click(function(e) {


        });

    });
</script>

Answer 1

您可以检查是否有活动有下一个兄弟，如果是，则从现有中删除类并添加到下一个。否则将class active添加到.main div元素中的第一个div元素，反之亦然逻辑用于后退按钮：

＆＃13;

$(function(){
$("#next").click(function(e) {
  var activeelement = $('.active');
  if(activeelement.next().length)
    activeelement.removeClass('active').next().addClass('active');
  else
    activeelement.removeClass('active').closest('.main').find('> div:first').addClass('active');
 });

$("#back").click(function(e) {
  var activeelement = $('.active');
  if(activeelement.prev().length)
activeelement.removeClass('active').prev().addClass('active');
  else
activeelement.removeClass('active').closest('.main').find('> div:last').addClass('active');
 });
});

＆＃13;

.main div{
    display: none;
}

.main .active{
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="active">First child</div>
    <div>Second child</div>
    <div>Thirdchild</div>
</div>

<a href="#" id="back">Back</a>
<a href="#" id="next">Next</a>

＆＃13;

Answer 2

你可以这样做

 $("#next").click(function(e) {
 $("#back").show();
   if (!$(".active").next().length) {
     $(this).hide()
   }
   $(".active").next().addClass("active").prev().removeClass("active");
 });
 $("#back").click(function(e) {
  $("#next").show();
   if (!$(".active").prev().length) {
     $(this).hide()
   }
   $(".active").prev().addClass("active").next().removeClass("active");
 });

Fiddle

使用.next()获取下一个元素。

Answer 3

尝试使用js。只显示功能。

$("#next").click(function(e) {

        var ind = 0;

       $('.main div').each(function(){
            if($(this).hasClass('active'))
            {
               ind = $(this).index()+2;
            }
       });
       $('.main div').removeClass('active');
       $('.main div:nth-child('+ind+')').addClass('active');
       $("#back").show();
       if($('.main div').last().hasClass('active')){
        $("#next").hide();
    }


    });

    $("#back").click(function(e) {
         $("#next").show();
        var ind = 0;

       $('.main div').each(function(){
            if($(this).hasClass('active'))
            {
               ind = $(this).index();

            }
       });
       if(ind==1)
       $('#back').hide();
       $('.main div').removeClass('active');
       $('.main div:nth-child('+ind+')').addClass('active');
    });

通过jquery更改其类，将子元素显示为父元素

3 个答案: