Пожалуйста, потерпите меня, здесь, вероятно, есть простой ответ ...
Мне нужно создать раздел макета с вкладками с максимально простыми css и javascript.
У меня есть несколько HTML-элементоврасположены друг над другом, используя css, и изначально им нужно было установить видимость: скрытый.Вот HTML ...
<div id="tabs1" class="hide">
<div id="tabs2" class="hide">
<div id="tabs3" class="hide">
Что я хочу сделать, это написать некоторый javascript, чтобы изменить свойство видимости одного div на 'visible' при нажатии на ссылку.
релевантноCSS для этого просто:
.hide { visibility: hidden; }
.show { visibility: visible; }
Следующий javascript работает для изменения скрытого на видимое путем изменения свойства класса -
function showThisTab(id)
{
// show this
document.getElementById(id).className += " show";
}
Использование следующих ссылок html для вызова функции сonclick:
<a href="#" onclick="javascript:showThisTab('tabs1')">Tab 1</a>
<a href="#" onclick="javascript:showThisTab('tabs2')">Tab 2</a>
<a href="#" onclick="javascript:showThisTab('tabs3')">Tab 3</a>
Все вышеперечисленное работает должным образом, но, очевидно, если вы нажмете более одной ссылки, все вкладки в конечном итоге будут видны друг на друге.Поэтому мне также нужно каждый раз сбрасывать все остальные вкладки на скрытые, оставляя видимой только ту, на которую нажал пользователь.
Я переписал свои js следующим образом:
<script type="text/javascript">
/*<![CDATA[*/
function showThisTab(id)
{
var i = 1;
// hide all other tabs:
while(i<10) {
var divID = 'tabs' + i;
if (divID !== null) {
document.getElementById(divID).className += " hide";
}
i++;
}
// show this one
document.getElementById(id).className += " show";
}
/*]]>*/
</script>
Это должно повторяться черезdiv, помеченные как tab1 to tab10 и добавляющие «hide» к свойству класса (должно работать правильно?).После этого добавьте 'show' к тому, который я хочу показать как обычно.
Однако скрипт просто ломается, Google Chrome показывает следующую ошибку: "Uncaught TypeError: Невозможно прочитать свойство 'className' из null"
Это происходит, когда он достигает строки: document.getElementById (divID) .className + = "hide";
Таким образом, благодаря выводу, divID на каком-то этапе все еще равен нулю, даже еслиесли заявление?В любом случае, я застрял здесь, и это расстраивает, потому что я уверен, что я близко.
Кто-нибудь может указать мне правильное направление?
tl; dr - выше код дает "Uncaught TypeError: Невозможно прочитать свойство 'className' из null ", и я не знаю, почему.
EDIT: @RichieHindle спасибо за указание, что это исправляет ошибку (я был глуп, как подозревал)
Я также был глуп по поводу добавления имени класса, рабочий код:
<script type="text/javascript">
/*<![CDATA[*/
function showThisTab(id)
{
var i = 1;
// hide all other tabs:
while(i<10) {
var divID = 'tabs' + i;
var div = document.getElementById(divID);
if (div !== null) {
div.className = " hide";
}
i++;
}
// show this one
document.getElementById(id).className = " show";
}
/*]]>*/
</script>