Question

我在隐藏第一个/最后一个项目的上一个/下一个按钮时遇到问题。我试图隐藏第一个按钮，然后隐藏最后一个按钮。当前项目具有“活动”类。

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

小提琴： 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();

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

<强>段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

所以我只是添加了几个条件来隐藏并显示下一个/上一个按钮

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

当First或Last项处于活动状态时隐藏Next和Previous按钮

4 个答案: