отлично работает.
код это должен быть вызван после того, как загрузятся все упомянутые элементы
<html>
<head>
<style>
.left li {
cursor:pointer;
list-style:none;
float:left;
margin-left:5px;
margin-right:5px;
color:#333;
}
.left li:hover {
color:#e3c7a2;
}
.block
{
margin:100px; padding:20px; border:1px solid #ccc; width:80%
}
</style>
<title>Выберите</title>
</head>
<body>
<div class="block">
<ul class="left">
<li id="click_div_1">1</li>
<li id="click_div_2">2</li>
<li id="click_div_3">3</li>
<li id="click_div_4">4</li>
<li id="click_div_5">5</li>
</ul>
<ul class="left">
<li id="click_div_prev">назад</li>
<li id="click_div_next">вперед</li>
</ul>
<div style="clear: both;"></div>
<div id='div_1' style="display:block">текст блока 1</div>
<div id='div_2' style="display:none">текст блока 2</div>
<div id='div_3' style="display:none">текст блока 3</div>
<div id='div_4' style="display:none">текст блока 4</div>
<div id='div_5' style="display:none">текст блока 5</div>
</div>
<script>
(function()
{
var cur_page=1,i;
//назначение обработчиков
document.getElementById('click_div_prev').onclick=function()
{
document.getElementById('div_'+cur_page).style.display='none';
cur_page--;
document.getElementById('div_'+cur_page).style.display='';
};
document.getElementById('click_div_next').onclick=function()
{
document.getElementById('div_'+cur_page).style.display='none';
cur_page++;
document.getElementById('div_'+cur_page).style.display='';
};
for(i=1;i<=5;i++)
{
document.getElementById('click_div_'+i).onclick=
(function(new_page)
{return function()
{
document.getElementById('div_'+cur_page).style.display='none';
cur_page=new_page;
document.getElementById('div_'+cur_page).style.display='';
}
})(i);
}
})()
</script>
</body>
</html>
PS надо добавить еще ряд проверок, чтобы не выходило за пределы в обе стороны, иначе скрипт перестает работать корректно.
Думаю сами с этим справитесь