在列表中向前和向后循环

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

然后，你需要一个函数与所有的资产净值标签移除current类，并将其设置在一个由index代表的参数index：

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

然后

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

呼唤你onClick() -handlers的getPosition()并加上或减去1给出您与您可以调用的最后一个函数的新指标。

也有类似的问题最近，在评论是工作jsbin：javascript using a loop to change the display of every element that has a specific class