Question

我有这个样本：

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

我想要的是当用户点击＆＃34; next＆＃34;按钮导航到下一个菜单，当您点击＆＃34; prev＆＃34;导航到上一个菜单。

我没有意识到我们应该怎么想这个，我需要一些想法。

提前致谢！

Answer 1

试试这段代码：

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

Answer 2

将索引变量（默认为0）放在元素click方法之外，为其分配当前菜单的值。然后在上一个按钮单击中，从当前索引中减去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();
});

DEMO

Answer 3

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

<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”。然后在prev函数中隐藏它并显示具有id-1的菜单，在下一个函数id + 1中。也许有更好的方法，但这是最简单的方法。

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

3 个答案: