javascript - 同步选定的导航jQuery

我可以进行以下操作，但使用下一个和上一个按钮时，无法将选定的导航突出显示（红色）。我还选择不在面板上使用ID，因为可能会添加或删除更多ID。并有一种更有效的脚本编写方法。

$(function($) {
  $(document).on('click', ".slidenav", function() {

    $("span.slidenav").on('click', function() {
      $(".panel").removeClass("active");
      var newPanel = $(this).index();
      $(".panel").eq(newPanel).addClass("active");

      $("span.slidenav").removeClass("selected");
      $(this).addClass("selected");
    });

  });

});

$(document).on('click', "#next", function() {

  if ($('.active').next('.panel').length) {
    $('.active').removeClass('active')
      .next('.panel')
      .addClass('active');
  }

});

$(document).on('click', "#prev", function() {
  if ($('.active').prev('.panel').length) {
    $('.active').removeClass('active')
      .prev('.panel,.slidenav')
      .addClass('active');
  }
});

.panel {
  width: 300px;
  height: 300px;
  position: absolute;
  display: none;
}

.panel:nth-child(1) {
  background: #ddd;
}
.panel:nth-child(2) {
  background: #ccc;
}
.panel:nth-child(3) {
  background: #bbb;
}
.panel:nth-child(4) {
  background: #aaa;
}

.active {
  display: block;
}

.selected {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav>
    <span class="slidenav selected">Panel 1</span>
    <span class="slidenav">Panel 2</span>
    <span class="slidenav">Panel 3</span>
    <span class="slidenav">Panel 4</span>
</nav>
<hr>
<div id="prev">Prev</div>
<div id="next">Next</div>
<hr>
<div class="panel-wrap">
    <div class="panel active">
    Panel 1
    </div>
    <div class="panel">
    Panel 2
    </div>
    <div class="panel">
    Panel 3
    </div>
    <div class="panel">
    Panel 4
    </div>
</div>

我在这里对整个内容都有一个codepen

最佳答案

您只需要对.active元素上的.panel类执行相同的操作，但是对.selected元素上的.slidenav类进行相同的操作。

更新：第一个事件绑定也有问题：在.slidenav元素的每个click事件上，您一次又一次绑定到click事件。

$(function($) {

  $("span.slidenav").on('click', function() {
    $(".panel").removeClass("active");
    var newPanel = $(this).index();
    $(".panel").eq(newPanel).addClass("active");

    $("span.slidenav").removeClass("selected");
    $(this).addClass("selected");
  });

  $(document).on('click', "#next", function() {
    if ($('.active').next('.panel').length) {
        $('.active').removeClass('active')
                    .next('.panel')
                    .addClass('active');
        $('.selected').removeClass('selected')
                    .next('.slidenav')
                    .addClass('selected');
    }

  });

  $(document).on('click', "#prev", function() {
    if ($('.active').prev('.panel').length) {
        $('.active').removeClass('active')
                    .prev('.panel')
                    .addClass('active');
        $('.selected').removeClass('selected')
                    .prev('.slidenav')
                    .addClass('selected');
    }
  });
});

.panel {
  width: 300px;
  height: 300px;
  position: absolute;
  display: none;
}

.panel:nth-child(1) {
  background: #ddd;
}
.panel:nth-child(2) {
  background: #ccc;
}
.panel:nth-child(3) {
  background: #bbb;
}
.panel:nth-child(4) {
  background: #aaa;
}

.active {
  display: block;
}

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <span class="slidenav selected">Panel 1</span>
    <span class="slidenav">Panel 2</span>
    <span class="slidenav">Panel 3</span>
    <span class="slidenav">Panel 4</span>
</nav>
<hr>
<div id="prev">Prev</div>
<div id="next">Next</div>
<hr>
<div class="panel-wrap">
    <div class="panel active">
    Panel 1
    </div>
    <div class="panel">
    Panel 2
    </div>
    <div class="panel">
    Panel 3
    </div>
    <div class="panel">
    Panel 4
    </div>
</div>