删除JS选项卡，切换活动

knockout JS tabs, toggle active

本文关键字：活动 JS 选项 删除      更新时间：2023-09-26

我觉得我就快到了，但我一直在原地打转。我运行了两个循环，一个用于制表符，另一个用于制表符内容。它的循环很好，但现在我需要让正确的在加载时激活或不激活。

<div id="tab">
    <ul class="nav nav-tabs" role="tablist">
        <!--ko foreach: $parent.tabArray-->         
            <li data-bind="click: toggleActive(init), css: init ? 'active': ''">
                <a data-bind="attr: {href: '#' + name}, text: name"></a>
            </li>
        <!--/ko-->
    </ul>
</div>

我已经尝试使用这个toggleActive(init)函数(init是数组中对象的布尔值)，并切换该值。然后一个内联布尔条件来决定这个元素是否具有css类"active"。这个功能不正常。什么好主意吗?

    var tabSetUp = function () {
        ko.components.register('MainContent', {
            template: MCTemplate
        });
        var self = this;
        self.toggleActive = function (clicked) {
         if (clicked) {
            return false;
         }
        else {
            return true;
        }
      }
    }
    tabSetUp();
//example of my array
    var MainViewModel = {
        tabArray: [
                { name: 'bob', init: true },
                { name: 'bib', init: false },
                { name: 'bab', init: false },
                { name: 'bub', init: false },
                { name: 'beb', init: false },
        ]
    };

最简单的方法是使用一个可观察对象来存储活动选项卡。

self.tabArray = [
    { name: 'bob'},
    { name: 'bib'},
    { name: 'bab'},
    { name: 'bub'},
    { name: 'beb'},
];
self.selectedTab = ko.observable(self.tabArray[0]);

当选项卡被单击时，使用click绑定。默认情况下，循环中的项将基于一个参数，在本例中是选项卡。然后，您可以使用css绑定来检查活动选项卡是否等于循环中的选项卡。$data将成为循环中的制表符:

<!--ko foreach: tabArray-->         
    <li data-bind="click: $parent.toggleActive, css: $parent.selectedTab() == $data ? 'active': ''">
        <a data-bind="attr: {href: '#' + name}, text: name"></a>
    </li>
<!--/ko-->

然后toggleTab函数将设置活动选项卡:

self.toggleActive = function (tab) {
    self.selectedTab(tab);
};

JsFiddle

您必须对代码进行一些更改。

var MainViewModel = {
        tabArray: [
                { name: 'bob', init: true },
                { name: 'bib', init: false },
                { name: 'bab', init: false },
                { name: 'bub', init: false },
                { name: 'beb', init: false },
        ],
        toggleActive: function (clicked) {
            alert(clicked);
        }
 };
ko.applyBindings(MainViewModel);

当你想将参数化函数绑定到click时，你必须使用click: function () { yourFunction(yourParameter); }

HTML 

<ul class="nav nav-tabs" role="tablist">
     <!--ko foreach: tabArray-->         
         <li data-bind="click: function() { $root.toggleActive(init) }, css: init ? 'active': ''">
             <a data-bind="attr: {href: '#' + name}, text: name"></a>
         </li>
      <!--/ko-->
 </ul>

工作示例https://jsfiddle.net/qm9ukac5/

相关文章：