Я пытаюсь создать простой веб-сайт с содержанием в центре и кнопками prev и next.

Я хотел бы, чтобы следующая кнопка исчезла или стала недоступной для нажатия, когда больше не осталось страниц, на которые можно нажать.

Вот что у меня так далеко:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DIV Test</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class="case active" id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam dolores optio necessitatibus.</div>
  <div class="case" id="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit dolore optio, fuga quae accusantium ratione possimus odit vel exercitationem porro temporibus quos repudiandae ut aperiam aliquid? Facilis enim, quas iure officia impedit labore, fugiat doloribus obcaecati, quis assumenda deleniti?</div>
  <div class="case" id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita autem consequatur perspiciatis quasi voluptatibus temporibus architecto et, qui nihil iure!</div>
  <div class="case" id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas commodi mollitia ipsam?</div>

<button id="prev">&#8249;</button>
<button id="next">&#8250;</button>


</body>
<script>
$(function() {
    var nextBtn = $("#next"),
        prevBtn = $("#prev");

    nextBtn.on('click', function(e) {
        var active = $(".active");
        var next = active.next('.case');
        if (next.length) {
            active.removeClass('active');
            next.addClass('active');
        }
    });
    prevBtn.on('click', function(e) {
        var active = $(".active");
        var prev = active.prev('.case');
        if (prev.length) {
            active.removeClass('active');
            prev.addClass('active');
        }
    });
});
</script>
</html>

И стиль CSS:

.active {
    display: block !important;
  }
  .case {
      display: none;
  }
  button {
    border: none;
    background-color: white;
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 3.2em;
    padding: 0;
    outline: 0;
  }
button:focus {
    border: 0;
    outline: 0;
}
button:active {
    transform: scale(1.2);
    background-color: white;
    border: 0;
    outline: 0;
}
  #prev {
    position: absolute;
    left: 5vw;
    bottom: 50vh;
  }
  #next {
    position: absolute;
    right: 5vw;
    bottom: 50vh;
    flex-wrap: wrap;
    justify-content: space-evenly;
      }
  button:hover{
      border: none;
      text-decoration: none;
      color: blue;
  }
  a {
    text-decoration: none;
  }

  a:hover {
    color: black;
  }

  #content {
    text-align: center;
    align-items: center;
  vertical-align: middle;
  border-color: #000000;
  border-width: 0.51px;
  border-style: solid;
  margin-top: calc(100vh - 75vh);
  margin-bottom: 25vh;
  margin-left: 15%;
  margin-right: 15%;
  border-radius: 1vw;
  padding: 1em 1em 1em 1em;
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

Я хочу, чтобы он был выровнен по центру и имел переключающие элементы. Может быть, я могу добавить некоторые переходы.

0
gilbster 21 Дек 2019 в 04:32

3 ответа

Лучший ответ

Вы можете отключить кнопку в блоке else:

.case{display:none;}
.active{display: block;}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DIV Test</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class="case active" id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam dolores optio necessitatibus.</div>
  <div class="case" id="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit dolore optio, fuga quae accusantium ratione possimus odit vel exercitationem porro temporibus quos repudiandae ut aperiam aliquid? Facilis enim, quas iure officia impedit labore, fugiat doloribus obcaecati, quis assumenda deleniti?</div>
  <div class="case" id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita autem consequatur perspiciatis quasi voluptatibus temporibus architecto et, qui nihil iure!</div>
  <div class="case" id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas commodi mollitia ipsam?</div>

<button id="prev">&#8249;</button>
<button id="next">&#8250;</button>


</body>
<script>
$(function() {
var nextBtn = $("#next"),
    prevBtn = $("#prev");

nextBtn.on('click', function(e) {
    var active = $(".active");
    prevBtn.prop("disabled",false);
    var next = active.next('.case');
    if (next.length) {
        active.removeClass('active');
        next.addClass('active');
    }else{$(this).attr("disabled","true");}
});
prevBtn.on('click', function(e) {       nextBtn.prop("disabled",false);
    var active = $(".active");
    var prev = active.prev('.case');
    if (prev.length) {
        active.removeClass('active');
        prev.addClass('active');
    }else{$(this).attr("disabled","true");}
});
});
</script>
</html>
0
Ritesh Khandekar 21 Дек 2019 в 01:52

Может быть, вам нужно вот что, сделайте все сами, чтобы завершить функции, просто добавьте логику в скрипт :

nextBtn.on('click', function(e) {
    var active = $(".active");
    var next = active.next('.case');
    if (next.length) {
        active.removeClass('active');
        next.addClass('active');
    }

    // add this: check if current page is the last page (no pages left)
    if (!next.next('.case').length) {
      nextBtn.attr("disabled", true);
    }
});
0
Loi Nguyen Huynh 21 Дек 2019 в 03:42

Сначала вы можете сохранить счет total_pages в переменной total_pages, а также объявить переменную current_page, а затем попробовать выполнить следующий код:

if(current_page == total_pages)
{
   $('#nextbtn').attr('disabled',true);
}
else
{
  $('#nextbtn').attr('disabled',false);
}
0
ata 21 Дек 2019 в 02:08