如何使用这两个按钮导航菜单

How can navigate the menu using the two buttons?

本文关键字：两个 按钮 导航 菜单 何使用      更新时间：2023-09-26

我有这样一个示例:

https://jsfiddle.net/hfv7xmo6/2/

HTML: 

<div class="container-project">
    <div class="menu">MENU1</div>
    <div class="menu">MENU2</div>
    <div class="menu">MENU3</div>
    <div class="menu">MENU3</div>
    <div class="menu">MENU4</div>
</div>
<div class="content-project">
    <div class="c1">CONTENT FOR MENU1</div>
    <div class="c1">
        <button class="prev">prev</button>
        <button class="next">next</button>
        CONTENT FOR MENU2
    </div>
    <div class="c1">CONTENT FOR MENU3</div>
    <div class="c1">CONTENT FOR MENczxczU3</div>
    <div class="c1">CONTENT FOR MENqqU3</div>
</div>

JS: 

$(document).ready(function () {
    var $c1s = $('.content-project .c1');
    $c1s.first().show();
    $('.container-project').on('click', '.menu', function () {
        var index = $(this).index();
        $c1s.hide();
        $c1s.eq(index).show();
    });
      $('.prev').click(function(){
                 //code to navigate to the prev menu
      });
       $('.next').click(function(){
                  //code to navigate to the next menu
      });
});

我想要的是，当用户点击"下一个"按钮导航到下一个菜单时，当你点击"上一个"按钮导航到上一个菜单时。

我不知道我们应该如何考虑这个问题，我需要一些想法。

提前感谢!

试试下面的代码:

$(document).ready(function () {
    var $c1s = $('.content-project .c1');
    $c1s.first().addClass('active').show();
    $('.container-project').on('click', '.menu', function () {
        var $cur = $('.content-project .c1.active');
        var index = $(this).index();
        $cur.removeClass('active').hide();
        $c1s.eq(index).addClass('active').show();
    });
    $('.prev').click(function(){
        var $cur = $('.content-project .c1.active');
        var index = $cur.index();
        if(index > 0){ // if its not 1st 
            $cur.removeClass('active').hide();
            $c1s.eq(index - 1).addClass('active').show();
        }
      });
       $('.next').click(function(){        
        var $cur = $('.content-project .c1.active');
        var index = $cur.index();
        if(index < $c1s.length){ // if its not last 
            $cur.removeClass('active').hide();
            $c1s.eq(index + 1).addClass('active').show();
        }
      });
});

jsfiddle

把你的索引变量(默认为0)放在元素的点击方法之外，给它分配当前菜单点击的值。然后单击上一个按钮，从当前索引中减去1并显示该元素，在下一个按钮中，将当前索引添加1并显示该元素。

在这两种方法中，首先隐藏当前索引元素。

HTML(更新): 

<button class="prev">prev</button>
<button class="next">next</button>
JQuery: 

$('.prev').click(function(){
    $c1s.eq(index).hide();
    $c1s.eq(index - 1).show();
});
$('.next').click(function(){
    $c1s.eq(index).hide();
    $c1s.eq(index + 1).show();
});

实现您想要的最简单的方法可能是将数字/索引应用于您的菜单。例如:

<div class="content-project">
    <div class="c1" id="1">CONTENT FOR MENU1</div>
    <div class="c1" id="2">
        <button class="prev">prev</button>
        <button class="next">next</button>
        CONTENT FOR MENU2
    </div>
    <div class="c1" id="3">CONTENT FOR MENU3</div>
    <div class="c1" id="4">CONTENT FOR MENczxczU3</div>
    <div class="c1" id="5">CONTENT FOR MENqqU3</div>
</div>

然后在上一个/下一个点击你可以只是寻找在这一刻显示的菜单，得到这个div的"id"。然后在上一个函数只是隐藏它，并显示有id-1的菜单，在下一个函数id+1。也许有更好的方法，但这肯定是最简单的方法。

相关文章：