Question

我有这个代码并在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个索引的选项卡上添加一个新的单击事件监听器，因此用户仍然需要单击它才能使其正常工作。

您需要call the myFunction with providing this将this.mynum设置为您想要选择的索引

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

更具可读性：

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

你可以打电话：

第一个标签的changeView（0）
changeView（1）for second tab
...

单击按钮时，javascript选项卡更改

1 个答案: