digital_sword, а jQuery уже не надо подключать, он прямо из коробки будет работать? Головой надо
думать!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pager</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.18.1.1" />
<style type="text/css">
.page-control {
border-bottom: 1px dotted black;
cursor: pointer;
}
.page-item {
border: 1px solid green;
margin: 10px;
display: none;
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
.page-active {
display: block;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function init_pager(control) {
if (!control) return;
var pages = [];
for (var i = 3; i--; ) {
var d = $('#'+'n'+(1+i)).addClass('page-item').get(0);
pages.unshift(d);
}
d = null;
pages[0].className += ' page-active';
control.pages = pages;
}
function shift_page(control) {
if (!control.pages || control.pages.length < 2) return;
var pages = control.pages;
pages[0].className = (' ' + pages[0].className + ' ').replace(' page-active ', '');
control.pages.push(control.pages.shift());
pages[0].className += ' page-active';
}
$(function(){
init_pager($('.page-control').get(0));
});
</script>
</head>
<body>
<span class="page-control" onclick="shift_page(this)">Next</span>
<div id="n1">раз</div>
<div id="n2">два</div>
<div id="n3">три</div>
</body>
</html>