Форум

sayber · #1 (**permalink**) 12.03.2009, 00:10

Не знаю даже с какой стороны подобраться к данной проблеме.

Надо реализовать блок, но моих знаний явно не хватит.

Суть проблемы в нижеследующей картинке: http://plasmon.rghost.ru/148389.image

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


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

Gvozd · #2 (**permalink**) 12.03.2009, 01:15

HTML стоило выложить текстом в соответствующем BB-теге, а не картинкой
mootols для решения вашей задачи не обязателен
решение будет выглядеть примерно так:

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

проверить не имел возможности, так как вбивать HTML руками лень.
должно быть рабочим вроде бы

sayber · #3 (**permalink**) 12.03.2009, 01:50

Что то не работает =(

Код html добавил.

Gvozd · #4 (**permalink**) 12.03.2009, 02:27

отлично работает.
код это должен быть вызван после того, как загрузятся все упомянутые элементы

<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 надо добавить еще ряд проверок, чтобы не выходило за пределы в обе стороны, иначе скрипт перестает работать корректно.
Думаю сами с этим справитесь

sayber · #5 (**permalink**) 12.03.2009, 02:48

Спасибо огромное +))

А почему скрипт не работает до загрузки элементов?

Gvozd · #6 (**permalink**) 12.03.2009, 02:56

потому что в нем навешиваются обработчики событий на элементы
и соответственно если элементов еще нету в DOM-дереве, то и навешивать событие не на что.

советую занятся более качественным изучением JS-а.
зря вы начали изучение JS-а с фреймворка.
сначала лучше научится решать элементарные задачи, без помощи многокилобайтных либ, чтобы не возникало глупых вопросов

sayber · #7 (**permalink**) 12.03.2009, 03:20

Так и поступлю.

Как ни странно но с js я сталкиваюсь редко, хотя разрабатываю крупные проекты на php уже более 8 лет.

sayber · #8 (**permalink**) 12.03.2009, 04:06

На увеличение я сделал проверку

if (cur_page == 5)
		{
		document.getElementById('div_'+cur_page).style.display='none';
		cur_page--;
		document.getElementById('div_5').style.display='';
		}
		else
		{
		document.getElementById('div_'+cur_page).style.display='none';
		cur_page++;
		document.getElementById('div_'+cur_page).style.display='';
		}

а вот как на уменьшение, что то в толк не возьму... Как не сделай все равно глючи

Gvozd · #9 (**permalink**) 12.03.2009, 16:34

неправильно ты делаеш проверку.
по твоей логике получается "если мы хотим увеличить номер страницы, и находимся на пятой, то сперва делаем невидимой пятую, затем выставляем внутренний счетчик на 4-ую страницу(нарушение логики), и делаем видимой 5-ую"
проверку можно сделать например так

document.getElementById('click_div_prev').onclick=function()
    {
    if(cur_page==1)
        return;
    document.getElementById('div_'+cur_page).style.display='none';
    cur_page--;
    document.getElementById('div_'+cur_page).style.display='';
    };
document.getElementById('click_div_next').onclick=function()
    {
    if(cur_page==5)
        return;
    document.getElementById('div_'+cur_page).style.display='none';
    cur_page++;
    document.getElementById('div_'+cur_page).style.display='';
    };

Форум

Справочник

Discord чат

Курсы javascript