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 - 处理程序：

 $('.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的函数，它从所有nav-tabs中删除current类，并将其设置在index表示的那个上：

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

然后

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

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

最近有一个类似的问题，在评论中是一个有效的问题：javascript using a loop to change the display of every element that has a specific class

通过列表循环前进和后退

1 个答案: