Javascript: установка Z-индекса для нескольких элементов (ID и класс) - PullRequest
Новая
       27

Javascript: установка Z-индекса для нескольких элементов (ID и класс)

2 голосов
/ 27 апреля 2011

У меня есть функция javascript, которая должна скрывать и показывать многослойные элементы div, просто меняя z-index.Я не знаю, является ли это лучшим способом сделать это, но это работает за исключением одной проблемы.У меня есть div содержимого (абсолютно позиционированные в CSS друг на друга), но у меня также есть навигационный div (абсолютно позиционированный в CSS внизу страницы), который всегда должен оставаться сверху.Итак, у меня есть этот код JavaScript: 

<script type="text/javascript"> 
var z = 1;
function showHide(id) {
document.getElementById(id).style.zIndex = z++;
document.getElementsByTagName('nav').style.zIndex = z++;
}
</script>

И у меня есть этот html: 

<div id="1a" class="content" style="z-index:1;">Content</div>
<div id="1b" class="content">More Content</div>
<div id="1c" class="content">Even More Content</div>
<div class="nav" style="z-index:2;">
  <a href="#" onclick="showHide('1a')">1</a> 
| <a href="#" onclick="showHide('1b')">2</a> 
| <a href="#" onclick="showHide('1c')">3</a></div>

Проблема в том, что строка z-index для div навигации испортила его.Он не только не выполняется, но и все, что я помещаю после него, также не выполняется (даже базовое предупреждение).Если я поменяю навигацию с класса на id, он будет работать нормально, но у меня будет несколько навигационных элементов на каждой странице (несколько слайдов в SlideDeck).Я мог бы просто установить z-index элемента навигации на 99999, но я хотел понять, почему он не работает «чище», поскольку похоже, что я могу совершить основную ошибку.

Спасибовы.

Ответы [ 2 ]

1 голос
/ 27 апреля 2011

Я не уверен, что это именно то, что вам нужно, но вам нужно создать цикл для getElementsByTagName или getElementsByClassName: 

var cells = table.getElementsByClassName('nav');
for (var i = 0; i < cells.length; i++) {
    cells[i].style.zIndex = z++;
}

Редактировать: Изменен вызов метода для getElementsByClassName.Сначала я просто взял то, что он написал, и добавил цикл.

0 голосов
/ 27 апреля 2011

Похоже, ваша проблема в том, что вы пытаетесь использовать getElementsByTagName, когда должны использовать getElementsByClassName . getElementsByTagName выполняет поиск элементов на основе имени тега, например, «div» или «span», а не имен классов.

Итак, используйте это так: 

<script type="text/javascript"> 
var z = 1;
function showHide(id) {
  document.getElementById(id).style.zIndex = z++;
  document.getElementsByClassName('nav')[0].style.zIndex = z++;
}
</script>

Имейте в виду, что метод был добавлен в Firefox 3 и может не поддерживаться в вашем браузере. Я бы порекомендовал использовать что-то вроде jQuery для поддержки кросс-браузерной совместимости. Используя jQuery, это выглядело бы так: 

<script type="text/javascript"> 
var z = 1;
function showHide(id) {
  $('#'+id).style.zIndex = z++;
  $('.nav').style.zIndex = z++;
}
</script>
...