Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Помогите пройти циклом для изменения класса 
V
    Опции темы
sunkitten
  Дата 28.7.2008, 23:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 21
Регистрация: 8.4.2008

Репутация: нет
Всего: нет
Долго бился, но так и не вышло.
Есть два вида класса - "item" и "item active".
Суть проста - изменить классы по клику. Элементу li, по которому "кликнули" присвоить "item active" и пробежать по остальным элементам и присвоить им просто "item". А элементу <div id="tab1" и другим контентным слоям поменять аналогичным методом стили - с видимого на невидимый и наоборот.

Для проверки CSS я слабал скрипт, который работает. Но в моем примере 2-е позиции, а на деле их будет 12. Поэтому мой вариант и не приемлим...
Код

<script>
function tabs(id)
{
    if (id == '2')
    {
        document.getElementById('1').className = "item";
        document.getElementById('tab1').style.display = "none";
        document.getElementById('2').className = "item active";
        document.getElementById('tab2').style.display = "";
    }
    else
    {
        document.getElementById('1').className = "item active";
        document.getElementById('tab1').style.display = "";
        document.getElementById('2').className = "item";
        document.getElementById('tab2').style.display = "none";
    }
}
</script>

Код

<ul class="lentamenu">
    <li id="1" onClick="tabs('1'); return false;" class="item active">    <a href="#">Первый</a></li>
    <li id="2" onClick="tabs('2'); return false;" class="item">            <a href="#">Второй</a></li>
</ul>
<div id="tab1" style="display:">content1 content<br>content1 content<br>content1 content<br></div>
<div id="tab2" style="display:none">content2 content<br>content2 content<br>content2 content<br></div>


Помогите пожалуйста кодом.
Спасибо.

Это сообщение отредактировал(а) sunkitten - 28.7.2008, 23:58
PM MAIL   Вверх
comtat
Дата 29.7.2008, 00:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
Лови 
Код

<html>
<head></head>
<body>
<style>
.item_active a {color:red;}
.item a {color:navy;}
</style>
<script>
function tabs(obj) {
    elems = document.getElementsByTagName("li");
    r = /li_(\d+)/i;
    for (i = 0; i < elems.length; i++) {
        arr = r.exec(elems(i).id);
        if (arr != null && arr.length > 1) {
            
            if (elems(i).id == obj.id) {
                elems(i).className = 'item_active';
            } else 
                elems(i).className = 'item';
        }
    }
}
</script>
<ul class="lentamenu">
    <li id="li_1" onClick="tabs(this);" class="item_active">    <a href="#">Первый</a></li>
    <li id="li_2" onClick="tabs(this);" class="item">            <a href="#">Второй</a></li>
    <li id="li_3" onClick="tabs(this);" class="item">            <a href="#">Третий</a></li>
    <li id="li_4" onClick="tabs(this);" class="item">            <a href="#">Четвертый</a></li>
</ul>
</body>
</html>



--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
sunkitten
  Дата 29.7.2008, 13:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 21
Регистрация: 8.4.2008

Репутация: нет
Всего: нет
Хм. Черт побери. Не удивительно, что у меня ничего не получилось. Тут я смотрю даже регулярки нужны... 
Спасибо comtat. Но я, такой сякой, когда создавал тему, сначала написал один вариант кода, на который Вы мне собственно и написали рабочий пример.
А минут через 10, я изменил код. Посмотрите его пожалуйста. Там наверное нужно обходить двумя циклами?  smile  smile 

И еще такой у меня вопрос. Вот смотрю в Вашем примере идет обращение к массиву тегов "Li". А не получится так, что у меня все такие теги будут работать на эту функцию? Может этим тегам ввести какое-нибудь отдельно имя? Или какой-то другой аналогичный идентификатор, что бы именно эту группу таких тегов унифицировать однозначно?  smile 

Заранее благодарен...
PM MAIL   Вверх
comtat
Дата 29.7.2008, 15:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
Цитата(sunkitten @  29.7.2008,  13:44 Найти цитируемый пост)
Посмотрите его пожалуйста. Там наверное нужно обходить двумя циклами? 

если инд-р div будет иметь имя типа "tab_li" то хватит одного
например
Код

            if (elems(i).id == obj.id) {
                elems(i).className = 'item_active';
                document.getElementById('tab_'+elems(i).id).style.display = 'inline';
            } else {
                document.getElementById('tab_'+elems(i).id).style.display = 'none';
                elems(i).className = 'item';
            }

но советую сделать стиль
Код

<style>
.hidden{ display: none;}
</style>
 и указывать div'у его как класс

Цитата(sunkitten @  29.7.2008,  13:44 Найти цитируемый пост)
Вот смотрю в Вашем примере идет обращение к массиву тегов "Li". А не получится так, что у меня все такие теги будут работать на эту функцию? Может этим тегам ввести какое-нибудь отдельно имя? Или какой-то другой аналогичный идентификатор, что бы именно эту группу таких тегов унифицировать однозначно

Код
elems = document.getElementsByTagName("li");

В elems помещаются все теги li. Для того чтобы выбрать нужные как раз и используется регулярка



--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
sunkitten
Дата 29.7.2008, 18:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 21
Регистрация: 8.4.2008

Репутация: нет
Всего: нет
Мда. Хочется самому разобраться, но никак у меня не получается.
Консоль ошибок уFireFox ругается на строку arr = r.exec(elems(i).id);

И Вашего примера у меня получилась следующая нерабочая конструкция:
Код

<ul class="lentamenu">
    <li id="li_1" onClick="tabs(this);" class="item active">    <a href="#" class="r txt_180">Title 1</a></li>
    <li id="li_2" onClick="tabs(this);" class="item">            <a href="#" class="bl txt_180">Title 2</a></li>
</ul>
<div id="content">
  <div id="tab_1" style="display:inline">content1 content content1 content content1 content </div>
  <div id="tab_2" style="display:none">content2 contentcontent2 content content2 content </div>
</div>


Код

function tabs(obj)
{
    elems = document.getElementsByTagName("li");
    r = /li_(\d+)/i;
    for (i = 0; i < elems.length; i++)
    {
        arr = r.exec(elems(i).id);
        if (arr != null && arr.length > 1)
        {
            if (elems(i).id == obj.id)
            {
                elems(i).className = 'item active';
                document.getElementById('tab_'+elems(i).id).style.display = 'inline';
            }
            else
            {
                document.getElementById('tab_'+elems(i).id).style.display = 'none';
                elems(i).className = 'item';
            }
        }
    }
}


Будьте любезны, посмотрите, где собака порылась...
Спасибо
PM MAIL   Вверх
sunkitten
Дата 29.7.2008, 20:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 21
Регистрация: 8.4.2008

Репутация: нет
Всего: нет
Разобрался.
Толи Вы, г-н comtat ошиблись, толи форум так изменил...
Вот это: elems(i).id нужно было писать с квадратными скобками: elems[i].id

Спасибо г-н comtat.
 smile  smile  smile  smile  smile  smile 
PM MAIL   Вверх
comtat
Дата 29.7.2008, 22:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 7
Всего: 71
Цитата(sunkitten @  29.7.2008,  18:09 Найти цитируемый пост)
Консоль ошибок уFireFox ругается на строку arr = r.exec(elems(i).id);

все верно. данный вариант будет работать только под ie
сорри  smile 


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
sunkitten
Дата 29.7.2008, 23:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 21
Регистрация: 8.4.2008

Репутация: нет
Всего: нет
Еще раз спасибо за оперативный совет в моем вопросе...
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0786 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.