單擊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）
• ...