javascript - 无法在选项卡中显示下拉菜单？

Question

我的 JavaScript 有问题，我无法正确显示我的标签页。
我无法在子标签中显示标签，您知道问题出在哪里吗？

这是我的 JavaScript 代码的一部分(完整代码在我的 jsfiddle 中):

function basla() {

    var tabListItems =  document.getElementById('tabs').children;
    for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
            var tabLink = getFirstChildWithTagName1( tabListItems[i], 'A' );
            var id = getHash1( tabLink.getAttribute('href') );
            tabLinks[id] = tabLink;
            contentDivs[id] = document.getElementById( id );
        }
    }

    var i = 0;

    for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab1;
        tabLinks[id].onfocus = function() { this.blur(); };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
    }

    var i = 0;

    for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabIcerik hide';
        i++;
    }
}

Answer 1

您只选择了 tabs 元素的直接子元素。你想要的是后代(包括嵌套元素):

var tabListItems =  document.getElementById('tabs').getElementsByTagName('*');

这将选择 ID 为 tabs 的元素内的所有元素(包括嵌套的 li)，而不仅仅是第一个和第二个 li 以及 ul。

---

下一个问题是子标签 li 的空 ID。在您的循环中，它将尝试设置 tabLinks[""]，这当然是不可能的，并且会在到达该元素时中断循环的其余部分。您需要捕获这种情况并将其排除:

var id = getHash1( tabLink.getAttribute('href') );
if (id=="") continue;

---

最后，在选择任何选项卡之前，您在开始时会遇到显示错误。这是因为类 tabIcerik 没有为第一个 li 设置，除非您切换到另一个元素然后再返回它。您应该预先设置它或更改最后一个 for 循环中的以下行。

if ( i != 0 ) {contentDivs[id].className = 'tabIcerik hide';}
else {contentDivs[id].className = 'tabIcerik';}