Поменять тексты при клике на ссылки

@insomniaOk · Регистрация: 15.04.2010

Author24 — интернет-сервис помощи студентам

Здравствуйте!
Помогите мне, пожалуйста!

Я написала скрипт, но уж очень он огромный и неудобный. Уверена, что можно сократить. Подскажите, пожалуйста.

Есть ссылки, при клике на которые открывается текст, меняется цвет шрифта активной ссылки, и также происходит с остальными. Один текст открывается, остальные закрываются

Вот, что у меня получилось

Javascript

<a href="javascript:void()" id="l1" style="color:red;" onclick="ChangeText1">Ссылка 1</a>
<a href="javascript:void()" id="l2" onclick="ChangeText2">Ссылка 2</a>
<a href="javascript:void()" id="l3" onclick="ChangeText3">Ссылка 3</a>
 
<div class="text1" id="t1">Текст 1</div>
<div class="text1" id="t1" style="display:none;">Текст 2</div>
<div class="text1" id="t1" style="display:none;">Текст 3</div>
 
function ChangeText1(){
document.getElementById("l1").style.color = "#de1800";
document.getElementById("l2").style.color = "#5a5d60";
document.getElementById("l3").style.color = "#5a5d60";
 
document.getElementById("text1").style.display = "";
document.getElementById("text2").style.display = "none";
document.getElementById("text3").style.display = "none";
}
 
function ChangeText2(){
document.getElementById("l2").style.color = "#de1800";
document.getElementById("l1").style.color = "#5a5d60";
document.getElementById("l3").style.color = "#5a5d60";
 
document.getElementById("text1").style.display = "none";
document.getElementById("text2").style.display = "";
document.getElementById("text3").style.display = "none";
}

И также для 3й сслыки, а у меня их 10

@Nazz · 15.04.2010, 18:28

можно попробывать так

Javascript

function ChangeText1(){
 
document.getElementById("l1").style.color = "#de1800";
document.getElementById("text1").style.display = "";
 
for (var i=2; i<=3;i++)
{
document.getElementById("l"+i).style.color = "#5a5d60";
document.getElementById("text"+i).style.display = "none";
}
}

Добавлено через 10 минут
но лутше вот так:

HTML5

1	<a href="javascript:void()" id="l2" onclick="ChangeText('2')">Ссылка 2</a>

у каждой такой стороке прописіваете такую функцию, только с соответствующим параметром... тогда ваша функция будет выглядеть вот так:

Javascript

function ChangeText(m){
var i;
for (i=1;i<=10;i++)
if (i==m)
{
document.getElementById("l"+i).style.color = "#de1800";
document.getElementById("text"+i).style.display = "";
}
else
{
document.getElementById("l"+i).style.color = "#5a5d60";
document.getElementById("text"+i).style.display = "none";
}

в опщем: как-то так, но нужно проверить всё ли правельно указал..

@cooperOk · 15.04.2010, 18:45

Можно попробовать так:

Javascript

function ChangeText(el){
    
    n = 15; // количество ссылок
    id = el.id.substr(1);   //получаем номер ссылки на которую нажали
                                 //убрав первую буквы из id
    
    //Вначале делаем всем ссылкам и полям
    //стандартные значения
    for (var i=1; i<=n; ++i)
    {
        document.getElementById("l"+i).style.color = "#5a5d60";
        document.getElementById("text"+i).style.display = "none";
    } 
 
    //А теперь меняем для выбраного объекта как надо
    
    document.getElementById("l"+id).style.color = "#de1800";
    document.getElementById("text"+id).style.display = "";
    
    }

А в html-коде надо будет указывать одну и туже функцию и передавать в нее this

HTML5

<a href="javascript:void()" id="l1" style="color:red;" onclick="ChangeText(this)">Ссылка 1</a>
<a href="javascript:void()" id="l2" onclick="ChangeText(this)">Ссылка 2</a>
 
<div class="text1" id="text1">Текст 1</div>
<div class="text1" id="text2" style="display:none;">Текст 2</div>

@insomniaOk · 15.04.2010, 19:01 **[ТС]**

Спасибо большое.
Получилось по 2му примеру Nazz

А по примеру cooperOk - при нажатии появляются все 3 текста и все ссылки меняют цвет (для всех 3х ссылок указала ChangeText(this))

@Nazz · 15.04.2010, 19:12

всегда пожалуста))) обращайтесь))

@cooperOk · 15.04.2010, 19:20

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

@insomniaOk · 15.04.2010, 19:44 **[ТС]**

cooperOk - и правда. Спасибо!

@insomniaOk 0 / 0 / 0 Регистрация: 15.04.2010 Сообщений: 3
	15.04.2010, 19:01 [ТС]	4
	Спасибо большое. Получилось по 2му примеру Nazz А по примеру cooperOk - при нажатии появляются все 3 текста и все ссылки меняют цвет (для всех 3х ссылок указала ChangeText(this)) 0

@Nazz WEB-developer 898 / 729 / 80 Регистрация: 12.03.2009 Сообщений: 2,804 Записей в блоге: 2
	15.04.2010, 19:12	5
	всегда пожалуста))) обращайтесь)) 0

@cooperOk 60 / 60 / 6 Регистрация: 12.11.2009 Сообщений: 169
	15.04.2010, 19:20	6
	Возможно это потому что переменная n не соответствует. У меня она стоит 15, а надо было всего лишь 3. У меня нажатая ссылка светится красным, все остальные серым и отображается только текст с тем же номером что и ссылка 0

@insomniaOk 0 / 0 / 0 Регистрация: 15.04.2010 Сообщений: 3
	15.04.2010, 19:44 [ТС]	7
	cooperOk - и правда. Спасибо! 0