Видимость Стиля CSS, не ведущая себя как ожидалось
У меня есть страница HTML с основным управлением вкладкой. Я использую JavaScript, чтобы показать и скрыть вкладки и отделения содержания вкладки. Моя проблема состоит в том, что, если я изменяю видимость элемента в одном из отделений содержания вкладки к 'скрытому', затем обратно к 'видимому', элемент, кажется, забывает или теряет свой родительский контейнер отделения и остается видимым, независимо от его исходной родительской видимости.
Для иллюстрирования возьмите следующий пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function hideTab(){
document.getElementById('tab1').style.visibility = 'hidden'
}
function showTab(){
document.getElementById('tab1').style.visibility = 'visible'
}
function hideContent(){
document.getElementById('tc1').style.visibility = 'hidden'
}
function showContent(){
document.getElementById('tc1').style.visibility = 'visible'
}
</script>
</head>
<body>
<a href="javascript: hideTab()">Hide Tab</a><br />
<a href="javascript: showTab()">Show Tab</a><br />
<a href="javascript: hideContent()">Hide Content</a><br />
<a href="javascript: showContent()">Show Content</a><br /><br />
<div id="tab1" style="background:yellow;width:100px">
<div id='tc1'>Content Text</div>
</div>
</body>
</html>
В IE8 нажимают 'Hide Tab' затем 'Выставочная Вкладка', это работает хорошо. С показанной вкладкой нажимают 'Hide Content' затем 'Выставочное Содержание', Это также корректно. Теперь нажмите 'Hide Tab' снова, и необходимо видеть, что вкладка исчезает, но содержание неправильно остается.
В IE8 исчезает проблема, когда я использую режим эмуляции. Кроме того, я заметил, что, если я удаляю элемент DOCTYPE, я не могу копировать проблему.
В Chrome (мой любимый) проблема является персистентной независимо от элемента DOCTYPE. Я не попробовал это в Firefox.
Я уверен, что существует очень серьезное основание для этого поведения, я также уверен, что будет простое решение для меня, чтобы заставить мои вкладки работать правильно. Я с нетерпением жду Ваших комментариев.
2 ответа
Это связано с тем, что свойство CSS «Видимость» унаследована, но делает не влияет на макет страницы. Поэтому, если вы устанавливаете элемент, который будет скрыт, все его дети будут, если вы не сделаете их видимыми (то есть случай, указав видимость: видимый ).
Вы должны сбросить свойство CSS, который будет унаследован, чтобы получить желаемое поведение. Вы можете сделать это, используя ключевое слово , как значение: Видимость: наследование
Редактировать или, как JavaScript:
element.style.visiblity = 'inherit';
Вместо того, чтобы установить видимость ребенка для «видимой», установить его на «наследую» - тогда он будет подчиняться Установка видимости родителей вместо того, чтобы переопределить его самостоятельно.