当第一个或最后一个项目处于活动状态时隐藏下一个和上一个按钮

Question

我在隐藏 first/last 项的 previous/next 按钮时遇到问题。我试图在第一个按钮上隐藏上一个按钮，在最后一个按钮上隐藏下一个按钮。当前项目有 class "active".

HTML:

<div class="container content">
    <div class="row">
        <div class="col-xs-3 lefty">
            <div id="left-nav">
                <ul>
                    <li><a class="nav-button" href="#1">Link 1</a></li>
                    <li><a class="nav-button" href="#2">Link 2</a></li>
                    <li><a class="nav-button active" href="#3">Link 3</a></li>
                    <li><a class="nav-button" href="#4">Link 4</a></li>
                    <li><a class="nav-button" href="#5">Link 5</a></li>
                    <li><a class="nav-button" href="#6">Link 6</a></li>
                </ul>
            </div>
        </div>
        <div class="col-xs-9 righty">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan efficitur nunc, ut suscipit nisl. Phasellus vitae tellus a nunc feugiat commodo eget ac lorem. Vivamus dolor nulla, tempor a vulputate at, auctor ac ex. Praesent vestibulum lorem vitae lectus fringilla, vitae aliquet velit consequat. Mauris erat urna, dictum ut aliquam at, accumsan eget leo. Cras vel egestas arcu, quis scelerisque libero. Pellentesque vulputate varius scelerisque. Proin elementum urna vitae enim tincidunt, et commodo massa sagittis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan efficitur nunc, ut suscipit nisl. Phasellus vitae tellus a nunc feugiat commodo eget ac lorem. Vivamus dolor nulla, tempor a vulputate at, auctor ac ex. Praesent vestibulum lorem vitae lectus fringilla, vitae aliquet velit consequat. Mauris erat urna, dictum ut aliquam at, accumsan eget leo. Cras vel egestas arcu, quis scelerisque libero. Pellentesque vulputate varius scelerisque. Proin elementum urna vitae enim tincidunt, et commodo massa sagittis.</p>

            <div class="bottom-links">
                <a class="prev-button" href="#">Left</a>
                <a class="next-button" href="#">Right</a>
            </div>

        </div>
    </div>
</div>

工作jQuery:

$(document).ready(function () {
    $('.next-button').click(function () {
        var $el = $('#left-nav li a.active').removeClass('active'),
            $next = $el.parent().next();

        if ($next.length === 0) $next = $('#left-nav li:first');

        $next.find('a.nav-button').addClass('active');

        // Added window.location.href to follow the selected links href
        window.location.href = $next.find('a.nav-button').attr('href');

    });


    $('.prev-button').click(function () {
        var $el = $('#left-nav li a.active').removeClass('active'),
            $prev = $el.parent().prev();

        if ($prev.length == 0) $prev = $('#left-nav li:last');

        $prev.find('a.nav-button').addClass('active');

        // Added window.location.href to follow the selected links href
        window.location.href = $prev.find('a.nav-button').attr('href');

    });
});

我的尝试：

$(document).ready(function () {
    if($('.nav-button').eq(-1).is(':not(.active)')){
        $('.next-button').show();
    }
    else {
        $('next-button').hide();
});

$(document).ready(function () {
    if($('.nav-button').eq(1).is(':not(.active)')){
        $('.prev-button').show();
    }
    else {
        $('prev-button').hide();
});

Fiddle: http://jsfiddle.net/jameelmoses/uo17qc94/

Answer 1

这将根据第一个或最后一个 .nav-button 是否处于活动状态来切换上一个和下一个按钮的可见性：

$('.prev-button, .next-button').click(function() {
  $('.prev-button').toggle($('.nav-button:first').is(':not(.active)'));
  $('.next-button').toggle($('.nav-button:last').is(':not(.active)'));
});

您可以像这样将此代码与您现有的代码结合起来：

$('.prev-button, .next-button').click(function() {
  var $el = $('#left-nav li a.active').removeClass('active'),
      $link = $(this).hasClass('prev-button') ? $el.parent().prev() : $el.parent().next();

  $link.find('a.nav-button').addClass('active');

  $('.prev-button')
    .toggle($('.nav-button:first').is(':not(.active)'))
    .html($link.prev().text());

  $('.next-button')
    .toggle($('.nav-button:last').is(':not(.active)'))
    .html($link.next().text());

  window.location.href = $link.find('a.nav-button').attr('href');
}).click();

这也会更改按钮的文本以匹配 link 文本。

片段

//Bottom links
$(document).ready(function () {

  $('.prev-button, .next-button').click(function() {
    var $el = $('#left-nav li a.active').removeClass('active'),
        $link = $(this).hasClass('prev-button') ? $el.parent().prev() : $el.parent().next();

    $link.find('a.nav-button').addClass('active');

    $('.prev-button')
      .toggle($('.nav-button:first').is(':not(.active)'))
      .html($link.prev().text());
          
    $('.next-button')
      .toggle($('.nav-button:last').is(':not(.active)'))
      .html($link.next().text());
      
    window.location.href = $link.find('a.nav-button').attr('href');
  }).click();
    
});

body { padding: 30px 0; font-family: Arial; }

a, a:hover { text-decoration: none; }

.lefty {
    padding: 0;
}

#left-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #eee;
}

#left-nav ul li a, #left-nav ul li a:visited {
    padding: 8px 16px;
    display: block;
    background-color: lightgray;
    color: navy;
}

#left-nav ul li a.active, #left-nav ul li a:hover, #left-nav ul li a:active {
    border-left: 4px solid orange;
    background-color: #eee;
    padding-left: 12px;
}

#left-nav ul li a.active {
    font-weight: bold;
}

.bottom-links a, .bottom-links a:visited {
    background-color: lightgray;
    padding: 6px 12px;
    border-radius: 4px;
    margin-top: 30px;
    color: navy;
    min-width: 60px;
    text-align: center;
}

.bottom-links a:hover, .bottom-links a:active {
    color: white;
    background-color: navy;
}

.prev-button {
    float: left;
    margin-left: 8%;
}

.next-button {
    float: right;
    margin-right: 8%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container content">
    <div class="row">
        <div class="col-xs-3 lefty">
            <div id="left-nav">
                <ul>
                    <li><a class="nav-button" href="#1">Link 1</a></li>
                    <li><a class="nav-button" href="#2">Link 2</a></li>
                    <li><a class="nav-button active" href="#3">Link 3</a></li>
                    <li><a class="nav-button" href="#4">Link 4</a></li>
                    <li><a class="nav-button" href="#5">Link 5</a></li>
                    <li><a class="nav-button" href="#6">Link 6</a></li>
                </ul>
            </div>
        </div>
        <div class="col-xs-9 righty">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan efficitur nunc, ut suscipit nisl. Phasellus vitae tellus a nunc feugiat commodo eget ac lorem. </p>

            <div class="bottom-links">
                <a class="prev-button" href="#">Left</a>
                <a class="next-button" href="#">Right</a>
            </div>

        </div>
    </div>
</div>

Answer 2

所以我只是添加了几个条件来隐藏和显示 next/prev 按钮

               //Bottom links
   $(document).ready(function() {
       $("#prev-button").text("link 2");
       $("#next-button").text("link 4");
       $('#next-button').click(function() {
           if ($("a.nav-button.active")[0] == $(".nav-button")[$(".nav-button").length - 2]) {
               $("#next-button").hide()
           }
           $("#prev-button").show();
           var $el = $('#left-nav li a.active').removeClass('active'),
               $next = $el.parent().next();

           if ($next.length === 0) $next = $('#left-nav li:first');

           $next.find('a.nav-button').addClass('active');
           if ($next.prev().find('a.nav-button')[0].innerText != undefined) {
               $('#prev-button').text($next.prev().find('a.nav-button')[0].innerText);
           }
           if ($next.next().find('a.nav-button')[0].innerText != undefined) {
               $('#next-button').text($next.next().find('a.nav-button')[0].innerText);
           }

           // Added window.location.href to follow the selected links href
           window.location.href = $next.find('a.nav-button').attr('href');

       });


       $('#prev-button').click(function() {
           if ($("a.nav-button.active")[0] == $(".nav-button")[1]) {
               $("#prev-button").hide()
           }
           $("#next-button").show();
           var $el = $('#left-nav li a.active').removeClass('active'),
               $prev = $el.parent().prev();

           if ($prev.length == 0) $prev = $('#left-nav li:last');

           $prev.find('a.nav-button').addClass('active');
           if ($prev.next().find('a.nav-button')[0].innerText != undefined) {
               $('#next-button').text($prev.next().find('a.nav-button')[0].innerText);
           }
           if ($prev.prev().find('a.nav-button')[0].innerText != undefined) {
               $('#prev-button').text($prev.prev().find('a.nav-button')[0].innerText);
           }

           // Added window.location.href to follow the selected links href
           window.location.href = $prev.find('a.nav-button').attr('href');

       });
   });

Answer 3

我添加了一个单独的函数，因此无论单击哪个导航（左侧或底部等）都可以调用它：

function setButtonDisplay(){
    var hidePrev = $('#left-nav li:first a.nav-button').hasClass('active'),
        hideNext = $('#left-nav li:last a.nav-button').hasClass('active');

    $('.prev-button')[hidePrev ? 'hide' : 'show']();
    $('.next-button')[hideNext ? 'hide' : 'show']();
}

Answer 4

尝试利用 onhashchange event

var prev = $(".prev-button"), next = $(".next-button");
    window.onhashchange = function(e) {
    var active = $(".nav-button.active");
        if (active.index(".nav-button") === $(".nav-button").length -1) {
            next.hide(0);
            prev.show(0);
        } else {
          next.show(0);
            if (active.index(".nav-button") === 0) {
              prev.hide(0)
            }
        }
}

当第一个或最后一个项目处于活动状态时隐藏下一个和上一个按钮

Hiding Next and Previous buttons when First or Last items are active

javascript

jquery

hide

show

show-hide