Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Помогите пройти циклом для изменения класса

Автор: sunkitten 28.7.2008, 23:40

Долго бился, но так и не вышло.
Есть два вида класса - "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>

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

Автор: comtat 29.7.2008, 00:08

Лови

Код


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

Автор: sunkitten 29.7.2008, 13:44

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

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

Заранее благодарен...

Автор: comtat 29.7.2008, 15:17

Цитата(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. Для того чтобы выбрать нужные как раз и используется регулярка

Автор: sunkitten 29.7.2008, 18:09

Мда. Хочется самому разобраться, но никак у меня не получается.
Консоль ошибок у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';
            }
        }
    }
}

Будьте любезны, посмотрите, где собака порылась...
Спасибо

Автор: sunkitten 29.7.2008, 20:03

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

Спасибо г-н comtat.
smile

Автор: comtat 29.7.2008, 22:32

Цитата(sunkitten @ 29.7.2008, 18:09

)

Консоль ошибок уFireFox ругается на строку arr = r.exec(elems(i).id);

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

Автор: sunkitten 29.7.2008, 23:07

Еще раз спасибо за оперативный совет в моем вопросе...