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

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

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>

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

我的尝试：

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

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

---

小提琴：

这将根据第一个

按钮还是最后一个
按钮处于活动状态来切换上一个按钮和下一个按钮的可见性。导航按钮
处于活动状态：

$('.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();

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

片段


//底部链接
$（文档）.ready（函数（）{
$（'.prev按钮，.next按钮'）。单击（函数（）{
变量$el=$（“#左导航李a.active”）.removeClass（“active”），
$link=$（this.hasClass（'prev-button'）？$el.parent（）.prev（）：$el.parent（）.next（）；
$link.find（'a.nav-button'）.addClass（'active'）；
$（“.prev按钮”）
.toggle（$（'.nav按钮：first'）。是（':not（.active）'））
.html（$link.prev（）.text（））；
$（“.下一步按钮”）
.toggle（$（'.nav按钮：last'）。是（':not（.active）'））
.html（$link.next（）.text（））；
window.location.href=$link.find（'a.nav-button'）.attr（'href'）；
})。单击（）；
});
body{padding:30px 0；字体系列：Arial；}
a、 a:悬停{文本装饰：无；}
.左撇子{
填充：0；
}
#左导航{
保证金：0；
填充：0；
列表样式：无；
背景色：#eee；
}
#左导航ul li a，#左导航ul li a：访问{
填充：8px 16px；
显示：块；
背景颜色：浅灰色；
颜色：海军蓝；
}
#左导航ul li a.激活，#左导航ul li a:悬停，#左导航ul li a:激活{
左边框：4倍纯色橙色；
背景色：#eee；
左侧填充：12px；
}
#左导航ul li a激活{
字体大小：粗体；
}
.底部链接a.底部链接a:已访问{
背景颜色：浅灰色；
填充：6px 12px；
边界半径：4px；
边缘顶部：30px；
颜色：海军蓝；
最小宽度：60px；
文本对齐：居中；
}
.底部链接a:悬停，.底部链接a:活动{
颜色：白色；
背景色：海军蓝；
}
.prev按钮{
浮动：左；
左缘：8%；
}
.下一个按钮{
浮动：对；
右边距：8%；
}









Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种有效的治疗方法。生命的相位告诉我们一个新的封建主义者

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

               //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');

       });
   });

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

尝试利用
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)
            }
        }
}

你知道我如何使下一个和上一个按钮的链接文本与左侧导航中的名称相同，而不是“下一个”和“上一个”吗？例如：如果链接3是活动项，则“上一步”按钮将显示“链接2”，而“下一步”按钮将显示“链接4”，而不是“下一步”和“上一步”。我编辑代码使其执行此操作，但是可能有一种更简洁的方法可以做到这一点，所以你可能想使用它。因此，我只是添加了一些格式，使代码更易于阅读。出于某种原因，我无法让它为我工作。我能解决我在课文上的问题。我现在已经完成了99%的任务。我遇到的唯一问题是，如果第一项或最后一项处于活动状态，则隐藏PageLoad上的按钮。提琴：注意我的按钮文本解决方案：我不需要在单击时更改文本，因为当单击左侧导航中的链接时，它将进入一个新页面。