单击javascript选项卡更改

Question

我有此代码，并且在“ Tab”单击时可以正常工作，但无法从“按钮单击”更改“ Tab”。

    var tabs = document.getElementById('icetab-container').children;
    var tabcontents = document.getElementById('icetab-content').children;

    var myFunction = function () {
        var tabchange = this.mynum;
        for (var int = 0; int < tabcontents.length; int++) {
            tabcontents[int].className = ' tabcontent';
            tabs[int].className = ' icetab';
        }
        tabcontents[tabchange].classList.add('tab-active');
        this.classList.add('current-tab');
    }


    for (var index = 0; index < tabs.length; index++) {
        tabs[index].mynum = index;
        tabs[index].addEventListener('click', myFunction, false);
    }

我尝试了这段代码：

    function changeView() {
        tabs[1].click(); // and 
        tabs[1].addEventListener('click', myFunction, false);
    }

正确的做法是什么？ 这是HTML代码：

        <div class="codepen-container">
            <div id="icetab-container">
                <div class="icetab current-tab">Add Group <i class="fa fa-users" aria-hidden="true"></i></div>
                <div class="icetab">Add User <i class="fa fa-user" aria-hidden="true"></i></div>
            </div>

                                <div class="col-md-offset-8 col-md-4 ">
                                    <button type="button" onclick="changeView()" Text="Save"class="btn btn-default" />
                                </div>

Answer 1

您现在正在执行的操作是在带有1个索引的选项卡上添加一个新的click事件侦听器，因此用户仍然需要单击它才能使其正常运行。

您只需要调用myFunction ，并将this.mynum设置为要选择的索引

function changeView() {
    myFunction.call({mynum: 1});
}

更具可读性的是：

function changeView(index) {
    myFunction.call({mynum: index});
}

您可以致电：

• 第一个选项卡的changeView（0）
• 第二个选项卡的changeView（1）
• ...