Question

所以我有一些标签。可以有多个选项卡，但我目前有3.我要做的是在单击选项卡时更改选项卡的样式，而其他选项卡则具有其他样式。我的代码如下：

    <div id="ClaimTabs" class="TabbedPanels">

        <div class="TabbedPanelsTabGroup">
            <div id="list1" class="TabbedPanelsTab TabbedPanelsTabSelected">
            <a id="anchor1" class="TabbedPanelAnchor" href="javascript:showTab(1);">Tab 1 </a>
            </div>

            <div id="list2" class="TabbedPanelsTab">
            <a id="anchor2" href="javascript:showTab(2);" >Tab 2</a>
            </div>

            <div id="list3" class="TabbedPanelsTab">
            <a id="anchor3" href="javascript:showTab(3);">Tab 3</a>
            </div>

        </div>



        <div id="ClaimContent" class="TabbedPanelsContentGroup">
            <div id="tab1" class="TabbedPanelsContent TabbedPanelsContentVisible" style="display: block;">
            Screen 1
            </div>

            <div id="tab2" class="TabbedPanelsContent" style="display: none;">
            Screen 2
            </div>

            <div id="tab3" class="TabbedPanelsContent" style="display: none;">
            Screen 3
            </div>

        </div>
    </div>

我操作样式的脚本如下：

function showTab(tabNumber) {
        var children = document.getElementById('TabbedPanelsTabGroup').childNodes;

        document.getElementById('tab'.concat(tabNumber)).style.display = 'block';
        document.getElementById('list'.concat(tabNumber)).setAttribute("class", "TabbedPanelsTab TabbedPanelsTabSelected");
        document.getElementById('anchor'.concat(tabNumber)).setAttribute("class", "TabbedPanelAnchor");

        for(i=1; i <= children.length ; i++)
            {
                if(i != tabNumber){

                    document.getElementById('tab'.concat(i)).style.display = 'none';
                    document.getElementById('list'.concat(i)).setAttribute("class", "TabbedPanelsTab");
                    document.getElementById('anchor'.concat(i)).setAttribute("class", "");
                    }
            }
        }

我想知道我的逻辑是否正确。我将选项卡，列表和锚点与数字和更新样式连接起来。但这似乎并没有起作用。

Answer 1

使用纯JavaScript我会推荐EventListener：

<div id="elem"> "some content here" </div>

var elem = document.getElementById('elem');
elem.addEventListener ('click', show, false);

 function show() {
    //add css Class
    var element = document.getElementById("elem");
    element.classList.add("activeTab");
 }

但正如评论中所提到的，jQuery非常适合这类事情。

最好的

中号

Answer 2

这里似乎至少有两个问题。

首先，您尝试将document.getElementById用于TabbedPanelsTabGroup，但这是一个类。

其次，当您可能正在寻找.childNodes时，您正在使用.children。 .childNodes包括所有子节点，包括标记内的文本（节点）。因此，当你使用那个数字来循环它时，你的循环不会计入3（你的#divs），而是计数到7，这就是错误。

但是，IE9之前不支持.children，所以像其他人所建议的那样，你可能需要考虑使用jQuery来获得更好的支持。

更改所有选项卡的选项卡样式，但单击的选项卡除外

2 个答案: