Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Запарка


Автор: Chapaev 20.1.2006, 18:53
http://www.economirea.ru/

Слева меню. Вообщем задача - что бы в каждый момент времени был открыт только 1 пункт.

Код

function SwitchMenu(obj) {
    if (document.getElementById) {
        var el = document.getElementById(obj);
        var ar = document.getElementsByName("sub");
        if (el.style.display == "none") {
            for (var i=0; i<ar.length; i++) {
                ar[i].style.display = "none";
            }
            el.style.display = "block";
        } else {
            el.style.display = "none";
        }
    }
}

Вообщем если клик идёт по закрытому блоку - мы закрываем все остальные и открываем нужный, если по открытому - то просто его закрываем.

Код

<table width="165" border="0" cellspacing="0" cellpadding="3" class="bodyline">
 <tr id="menu5" onClick="SwitchMenu('sub5')" style="cursor:pointer;">
  <th>Мир экономики</th>
 </tr>
</table>

<table width="165" border="0" cellspacing="1" cellpadding="3" id="sub5" name="sub" style="display:none;" class="blockline">
 <tr>
  <td>
   <table>
    <tr>
     <td>
      <img src="images/navi.gif" border="0">
     </td>
     <td>
      <a href="http://economirea.ru/">Мир экономики</a>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

Первая таблица - заголовок блока и видна всегда при клике - onClick="SwitchMenu('sub5')". Вторая с id="sub5" name="sub" - которая собственно прячется. Так же и у остальных блоков, меняется только id.

Автор: Innuendo 20.1.2006, 19:08
чё-то мудренно у тебя в скрипте.
Дай каждому меня свой id типа sub1-sub6 или скок-там у тебя.
При загрузке страницы задавай всем style.display=none через цикл,
а на клике на какой-нить из менюшек, её style.display=true, и по всем пройтись - закрыть, кроме неё.
то есть в цикле проверять на id этой менюшке, и если это она, то continue - то есть циклл пропустит её

Автор: Chapaev 20.1.2006, 19:20
Ну я почти так и делаю + у меня у каждой менюшки name="sub". Следовательно я закрываю в цикле все элементы у которых name="sub" и открываю те, у которых id="sub1".

Автор: Chapaev 21.1.2006, 15:33
Ну народ, помогите пожалуйста!

Автор: GIK 21.1.2006, 16:00
Задачка вроде понятна и ясна, НО
Цитата(Chapaev)

Вообщем если клик идёт по закрытому блоку - мы закрываем все остальные и открываем нужный


А нужный как определяется?

Автор: 12345c 21.1.2006, 17:16
Проблема, видимо, исходит из того, что Опера не поддерживает столь "кривое" использование name. Этот атрибут изначально работал в формах, и вовсе не обязан работать, а тем более, входить в коллекцию, если присвоен таблице. В таких случаях наиболее естественно используют class. Далее, я бы не стал пользоваться сомнительными коллекциями, а прошёл бы все элементы и поспрашивал у них класс. А может быть, и getElementsByClass будет работать.

Автор: Ciber SLasH 22.1.2006, 02:37
2Chapaev:
Вот, посмотри:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251' />
<meta name="Generator" content='EditPlus 2.12' />
<meta name="Author" content='Ciber SLasH' />
<title>JavaScript :: Примеры работы с таблицами</title>
<script type='text/javascript'>
function selectCell(tb_ID) {
var obj = document.getElementsByTagName('TABLE');    // массив всех элементов TABLE
    for (var n = 0; n < obj.length; n++) {    // пробег по всем элементам TABLE
        if (obj[n].id.match(/^t[0-9]{2}$/) != null) {    // если ID у таблицы == "txx"
            if (obj[n].id == tb_ID) {
                obj[n].className = 'active';
            } else {
                obj[n].className = 'passive';
            }
        }
    }
}
</script>
<style>
table, td {border: 1px solid navy}
.active {display: block}
.passive {display: none}
:link, :visited {color: #009900; font-weight: bold; text-decoration: none}
:hover, :active {color: #00CC00; text-decoration: underline}
</style>
</head>

<body>
<table id='t01' class='active' cellspacing="0" cellpadding="5" style='float: left; margin-right: 10px'>
<caption>Таблица №1</caption>
<tr><td>Ячейка 1</td></tr>
<tr><td>Ячейка 2</td></tr>
<tr><td>Ячейка 3</td></tr>
</table>

<table id='t02' class='passive' cellspacing="0" cellpadding="5" style='float: left; margin-right: 10px'>
<caption>Таблица №2</caption>
<tr><td>Ячейка 4</td></tr>
<tr><td>Ячейка 5</td></tr>
<tr><td>Ячейка 6</td></tr>
</table>

<table id='t03' class='passive' cellspacing="0" cellpadding="5">
<caption>Таблица №3</caption>
<tr><td>Ячейка 7</td></tr>
<tr><td>Ячейка 8</td></tr>
<tr><td>Ячейка 9</td></tr>
</table>

<table cellspacing="0" cellpadding="5" style='clear: both'>
<caption>Выбор таблиц</caption>
<tr><td><a href='javascript: selectCell("t01")'>Выбрать таблицу №1</a></td></tr>
<tr><td><a href='javascript: selectCell("t02")'>Выбрать таблицу №2</a></td></tr>
<tr><td><a href='javascript: selectCell("t03")'>Выбрать таблицу №3</a></td></tr>
</table>
</body>
</html>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)