+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Понятное название для данной темы мы придумать не смогли))))

Итак, постараемся объяснить
Допустим на нашем сайте мы делаем несколько ссылок (в нашем примере 5), каждой ссылке соответствует текст, при клике на другую ссылку текст меняется, но страница сайта не перезагружается. Здесь не будет использоваться технология ajax

Если не понятно жмите сюда

Для начала создаем файл script.js и пишем туда следующий код
function look(type){
var div1 = document.getElementById('div1');
if ((div1) != 'undefined' && div1 != null)
{div1.style.display = 'none';
var span1 = document.getElementById('span1');
span1.className = 'off';
}


var div2 = document.getElementById('div2');
if ((div2) != 'undefined' && div2 != null)
{div2.style.display = 'none';
var span2 = document.getElementById('span2');
span2.className = 'off';
}

var div3 = document.getElementById('div3');
if ((div3) != 'undefined' && div3 != null)
{div3.style.display = 'none';
var span3 = document.getElementById('span3');
span3.className = 'off';
}

var div4 = document.getElementById('div4');
if ((div4) != 'undefined' && div4 != null)
{div4.style.display = 'none';
var span4 = document.getElementById('span4');
span4.className = 'off';
}

var div5 = document.getElementById('div5');
if ((div5) != 'undefined' && div5 != null)
{div5.style.display = 'none';
var span5 = document.getElementById('span5');
span5.className = 'off';
}

var divEn = document.getElementById('div' + type);
if ((divEn) != 'undefined' && divEn != null)
{divEn.style.display = 'block';
var spanEn = document.getElementById('span' + type);
spanEn.className = 'act';
}
}
Как видите из тега SPAN мы сделали как будто ссылку, когда SPAN активен его класс равен act, остальные SPAN'ы в это время как ссылки и имеют класс off

Добавим стиль для наших ссылок:
.off{
cursor:pointer;
color:#53ba0e;
text-decoration:underline;}

.off:hover{
color:Orange;
text-decoration: none;}

.act{
font-weight:bold;
color:#747474;
text-decoration: none;
cursor:text;}
Подгружаем наш файл
<script type="text/javascript" src="script.js"></script>
Дальше все просто
<span class='act' id='span1' onclick="look('1')"><b>Ссылка 1</b></span>
<span class='off' id='span2' onclick="look('2')"><b>Ссылка 2</b></span>
<span class='off' id='span3' onclick="look('3')"><b>Ссылка 3</b></span>
<span class='off' id='span4' onclick="look('4')"><b>Ссылка 4</b></span>
<span class='off' id='span5' onclick="look('5')"><b>Ссылка 5</b></span>
И текст для ссылок
<div id="div1">Текст первой ссылки</div>
<div id="div2" style="display:none;">Текст второй ссылки</div>
<div id="div3" style="display:none;">Текст третьей ссылки</div>
<div id="div4" style="display:none;">Текст четвертой ссылки</div>
<div id="div5" style="display:none;">Текст пятой ссылки</div>
Ну как-то вот так)))


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 4087