#javascript #html #css
#javascript #HTML #css
Вопрос:
У меня проблема при использовании двух элементов ul tab на одной странице. Они оба работают, однако, если нажать другой элемент ul tab на втором элементе ul, первый элемент исчезнет.
Я почти уверен, что проблема в том, что он скрывает div:
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
Однако, похоже, я не могу решить эту проблему с помощью различных вещей, которые я пробовал.
Любая помощь приветствуется.
С наилучшими пожеланиями, Патрик
Ответ №1:
Это потому, что вы зацикливаетесь на целых contentdivs и устанавливаете, что щелкнули по одному, чтобы показать, а остальные — скрыть.
Что вам следует сделать, так это сохранить две вкладки, сгруппированные в два отдельных раздела, а затем выполнить цикл по дочерним узлам div, на элементе которого был нажат li.
В функции show
function showTab() {
**// this div contatins one tab group**
var parentDiv = this.parentNode.parentNode.parentNode;
var selectedId = getHash( this.getAttribute('href') );
**// loop only through the div of which li tab has been clicked**
for ( var i = 0; i < parentDiv.childNodes.length; i ) {
if ( parentDiv.childNodes[i].nodeName == "DIV" ) {
var id = parentDiv.childNodes[i].getAttribute('id');
// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
}
// Stop the browser following the link
return false;
}
И в html
<div id="tab-group1"> code block for tab 1 </div>
<div id="tab-group2"> code block for tab 2 </div>
Комментарии:
1. Привет, Сами, круто, спасибо за твою помощь. Возможно ли сделать так, чтобы обе вкладки начинались открытыми, чтобы группы вкладок 1 и 2 имели открытую вкладку при загрузке страницы? Это должно иметь какое-то отношение к этой функции со следующим комментарием в jsfiddle: // Скрыть все разделы содержимого, кроме первого
2. @Patrick смотрите обновленный jsfiddle. Также попробуйте посмотреть, как вы можете уменьшить повторяемость кода, например, вы выполняли цикл в разное время, чтобы присвоить разное значение, что может быть выполнено за один цикл 😉
Ответ №2:
Вы должны использовать отдельную обработку и идентификаторы как для ** ul **, так и для самих элементов tab. Я предполагаю, что он просто обрабатывает оба набора вкладок в одной функции, что означает, что одновременно может быть видна только 1 вкладка (скрывает вкладку из 1-го ul для отображения вкладки во 2-м ul).
Попробуйте разделить их обработку, и все должно сработать.
Комментарии:
1. Привет, Юрий, спасибо за твой ответ. Как вы предлагаете мне это сделать? Это то, что вы можете показать в jsfiddle, если у вас есть свободная минута или две?
2. @Patrick Хорошо, итак, в вашем коде вы как бы ссылаетесь на вкладки и прочее, используя один массив — tabLinks, и ссылаетесь на них, используя tabLinks[id] . Это означает, что все ваши вкладки и все ваши кнопки вкладок хранятся в одном массиве, а это не то, что вы хотите. Что вам нужно было бы сделать, чтобы разделить их, попробуйте сохранить объекты в массиве и ссылаться на них как на tabLinks[tabId][id]. Таким образом, вы получаете двумерный массив с отдельными наборами для каждого tabId (в данном случае каждого ul), для которого вы запускаете функцию. Сделайте это для всех ссылок на массивы contentDivs и tabLinks.
3. еще раз спасибо за вашу помощь. Теперь я сделал, как вы предложили, но по-прежнему безуспешно. То, что вы говорите, имеет полный смысл, но сценарий, похоже, не согласен. Обновленная скрипка: jsfiddle.net/eromreve/aqLN2/2 Я не понимаю, почему переменная id передается через функции как глобальная переменная, когда она не определена, и почему мой tabId тогда также не передается через. Похоже, что в showtab () он не будет принимать tabId в качестве переменной. Надеюсь, у вас есть чем поделиться со мной 🙂
4. Да, я не заметил, что это другая функция. Что ж, тогда определите tabId в функции showTab следующим образом: var tabId = this.parentNode.parentNode.getAttribute(‘id’);