在列表中前后循环

Question

我创建了一个可直接点击的列表，但用户也应该能够使用前进和后退按钮在列表中循环。目前，我列出的项目确实将颜色变为红色。有没有办法使用 jQuery 让我在列表中前后移动？我查看了 Stack Overflow 并找到了使用数组的示例，但是我的列表会随着时间的推移而扩展，这似乎取消了使用数组来实现这一点。任何帮助都会很棒！

var Lst;

function changecolor(obj) {
  if (Lst) Lst.style.color = "#663399";
  obj.style.color = "red";
  Lst = obj;
}

<!--shows hyperlink and targets iframe-->
(function() {
  $('.menu a.nav-tab').on('click', function() {
    var href = $(this).attr('href');

    $('iframe').attr('src', href);
    $('.current-url').empty().append($('<a>').attr('href', href).append('"' + href + '"'));

    $('.menu a.nav-tab').removeClass('current');
    $(this).addClass('current');
    return false;
  });
})();

* {

  font-family: Helvetica, Arial, sans-serif;

  font-size: 12px;

}

a:link {

  text-decoration: none;

}

a:visited {

  text-decoration: none;

}

a:hover {

  text-decoration: underline;

}

a:active {

  text-decoration: underline;

}

iframe {

  width: 200px;

  height: 100%;

}

.hyperlinks {

  height: 25px;

  width: 250px;

  position: absolute;

  left: 265px;

  top: -4px;

  background: #ffffff;

}

.current-url {

  text-overflow: ellipsis;

  width: 250px;

  height: 15px;

  overflow: hidden;

  white-space: nowrap;

  padding-bottom: 3px;

  background: #ffffff;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cycle_menu">
  <p>Previous</p>
  <p>Next</p>
</div>
<br>
<div class="hyperlinks">
  <p class="current-url"></p>

</div>

<div class="menu">
  <a class="nav-tab tab15" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab14" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab13" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab12" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab11" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab10" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab9" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab8" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab7" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab6" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab5" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab4" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab3" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab2" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

  <a class="nav-tab tab1" href="http://www.dictionary.com" onclick="changecolor(this)">Menu item</a>
  <br/>
  <br/>

</div>

<iframe width="100%" frameborder="1"></iframe>

Answer 1

首先，将类添加到您的后退和前进按钮会很有帮助，比如说back 和next。这样，您可以更轻松地在函数中为它们设置 onClick-Handler：

 $('.back').on('click', function() {
    // here you need to find the currently selected menu item and
    // select the one before that. Have a similar function for the 
    // next button
 }

然后你需要一个函数来告诉你当前选择的菜单项，像这样：

function getPosition() {
  var parent = document.getElementsByClassName("menu")[0];
  var children = parent.getElementsByClassName("nav-tab");

  var pos = 0;

  for (var i = 0; i < children.length; i++) {
        if (children[i].classList.contains('current') {
          pos = i;
          break;
        }
    }
  return pos;
}

然后您需要一个带有参数index 的函数，该函数从所有导航选项卡中删除current 类并将其设置为index 表示的类：

$('.menu>.nav-tab').removeClass('current')';

然后

$('.menu>.nav-tab').each(function(pos, element) {
    if (pos == index) {
        $(element).addClass('current')';
    }
});

在您的onClick()-handlers 中调用getPosition() 并添加或减去 1 会为您提供新的索引，您可以使用该索引调用最后一个函数。

最近有一个类似的问题，在 cmets 中有一个工作的 jsbin：javascript using a loop to change the display of every element that has a specific class