Is there a way to implement forward and backward buttons for a clickable list without using arrays, as the list will be expanding over time? I have already achieved changing color of the listed items to red, but need a solution to navigate through the list. Any help would be greatly appreciated!
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">
<!-- repeated menu link items here -->
<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>