堆栈内存溢出
  简体   繁体   English

一旦不再可点击，如何使下一个按钮消失？

[英]How to make a next button disappear once it's no longer clickable?

 原文  2019-12-21 01:32:27  8   3    javascript/ html/ css

问题描述

I'm trying to design a simple website with content in the center and prev and next buttons.我正在尝试设计一个简单的网站，其内容位于中心以及上一个和下一个按钮。

I would like the next button to disappear or become un-clickable once there are no more pages left to click.一旦没有更多页面可供点击，我希望下一个按钮消失或变得不可点击。

Here's what I have so far:这是我到目前为止所拥有的：

<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>

And the CSS style:和 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);
  }

I want it to be aligned in the center and have switching elements.我希望它在中心对齐并具有切换元素。 Maybe i can add some transitions as well.也许我也可以添加一些过渡。

3 个解决方案

解决方案1
 0 已采纳  2019-12-21 01:52:40

You can disable button in else block:您可以在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>

解决方案2
 0  2019-12-21 02:01:46

You can first store total_pages count in total_pages variable and also declare a current_page variable and then try with below code:您可以首先将total_pages计数存储在total_pages变量中，并声明一个current_page变量，然后尝试使用以下代码：

if(current_page == total_pages)
{
   $('#nextbtn').attr('disabled',true);
}
else
{
  $('#nextbtn').attr('disabled',false);
}

解决方案3
 0  2019-12-21 02:06:26

Maybe what you need is this, go further yourself to make the features complete, just more logic to the script :也许你需要的是这个，自己走得更远，使功能完整，只是脚本的更多逻辑：

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);
    }
});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使按钮一旦按下就不可点击或隐藏 - How to make a button not clickable or hide once pressed 如何使按钮只能单击一次 - How to make a button only clickable once 单击后如何使按钮消失？ - How do I make a button disappear once clicked? Vanilla Javascript：如何使按钮只能点击一次 - Vanilla Javascript : how to make a button clickable once only 如何制作可点击按钮？ - How to make clickable button? 如何使用 JavaScript 使不可点击的按钮可点击？ - How to make a non clickable button clickable with JavaScript? 如何使“打印”按钮消失 - How to make a “Print” button disappear 如何使HTML中的按钮消失？ - How to make disappear a button in HTML? 如何使按钮消失 onclick - How to make the button disappear onclick 按下提交按钮时如何更改表单的动作|| 使提交按钮只能单击一次？ - how to change the action of a form when the submit button is pressed || make the submit button clickable only once?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM