tk.stas,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selectable demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
p{ display: none; }
.selected { display: block; }
</style>
<script>
$(document).ready(function()
{
var p = $("p"), i = localStorage.getItem("indx")||0;
p.eq(i).addClass("selected");
$(document).on("click", ".next, .prev", function(event)
{
event.preventDefault();
var selected = $(".selected");
selected.removeClass("selected");
if($(this).hasClass("next") ) {
selected = selected.next('p').size()? selected.next():p.first() ;
}
else {
selected = selected.prev('p').size()? selected.prev():p.last();
}
selected.addClass("selected");
i = p.index(selected);
localStorage.setItem("indx", i);
}
)
}
);
</script>
</head>
<body>
<a href="" class="prev">prev</a> <a href="" class="next">next</a>
<p>1</p><p>2</p><p>3</p>
</body>
</html>
|