点击前后按钮动态切换li选中状态并同步加载对应文件

问题根源 #

你现有代码的核心问题有两个：

• prev按钮逻辑缺失：只获取了当前带action类的选中元素，没有进一步获取它的前一个对应a标签，逻辑等于没做切换
• next()/prev()方法调用对象错误：a标签嵌套在li标签内，你直接在a元素上调用next()，只能获取当前a的同级节点，无法获取下一个li内的a标签

修正后代码 #

JS部分

$("#prev").click(function() {
  var elems = $('#smallTitle li a');
  var current = elems.filter('.action');
  // 先取当前a的父级li，再找前一个li内的a标签
  var prev = current.parent().prev('li').find('a');
  if (prev.length === 0) prev = elems.last();
  // 切换选中状态
  elems.removeClass('action');
  prev.addClass('action');
  // 同步跳转到对应文件
  window.location.href = prev.attr('href');
});

$("#next").click(function() {
  var elems = $('#smallTitle li a');
  var current = elems.filter('.action');
  // 先取当前a的父级li，再找后一个li内的a标签
  var next = current.parent().next('li').find('a');
  if (next.length === 0) next = elems.first();
  // 切换选中状态
  elems.removeClass('action');
  next.addClass('action');
  // 同步跳转到对应文件
  window.location.href = next.attr('href');
});

HTML修正（原HTML中prev按钮显示文本和next重复，建议调整）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="SwitchURL-small-list" id="smallTitle">
  <button id="prev" type="button"> < </button>

  <li class="SwitchURL-small-item">
    <a href="AA" class="SwitchURL-small-link action" id="SwitchURL0">AA</a>
  </li>
  <li class="SwitchURL-small-item">
      <a href="BB" class="SwitchURL-small-link" id="SwitchURL1">BB</a>
  </li>
  <li class="SwitchURL-small-item">
      <a href="CC" class="SwitchURL-small-link" id="SwitchURL2">CC</a>
  </li>
  <li class="SwitchURL-small-item">
      <a href="DD" class="SwitchURL-small-link" id="SwitchURL3">DD</a>
  </li>
  <li class="SwitchURL-small-item">
      <a href="EE" class="SwitchURL-small-link" id="SwitchURL4">EE</a>
  </li>

  <button id="next" type="button"> > </button>
</ul>

可选CSS修正（原CSS中li的类名拼写错误，把small写成了smaill，会导致样式不生效）

.SwitchURL-small-list{
    display:flex;
    list-style:none;
    font-size: 22px;
    font-weight:bold;
}

/* 修正类名拼写错误 */
.SwitchURL-small-item{
    border-bottom: 0px solid#AE96DA;
    padding: 0 1%;
    margin-bottom: 1%;
    font-size: 20px;
}

.SwitchURL-small-link{
    color: #CFC1E9;
    margin-right: 15px;
    margin-left: 15px;
}

.SwitchURL-small-link:hover{
    color: #AE96DA;
}

.SwitchURL-small-link.action {
    border-bottom: 2px solid#AE96DA;
    color: #AE96DA;
    margin-right: 15px;
}

实现效果 #

• 点击next按钮自动切换到下一个选项，最后一项切回第一项
• 点击prev按钮自动切换到前一个选项，第一项切回最后一项
• 切换选中状态的同时自动跳转到对应a标签的href地址，同步展示对应文件

内容的提问来源于stack exchange，提问作者ChaCha