Javascript 隐藏并显示WinJS.UI.PivotItem

我需要隐藏Windows Phone 8.1应用程序的

WinJS.UI.PivotItem

，然后在满足某些条件后再次显示它

我原以为它会像使用CSS显示和隐藏

WinJS.UI.PivotItem

一样简单，但它隐藏了

.win pivot item

元素，而不是

.win pivot头

如何在

WinJS.UI.Pivot

控件中以编程方式显示和隐藏

WinJS.UI.PivotItem

<div id="divContent" data-win-control="WinJS.UI.Pivot" data-win-options="{title: 'Details', selectedIndex: 0}">
    <div id="divSelected" style="display: none;" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Currently Selected'}">

        <!-- Content - Hide this until we need it -->

    </div>
    <div id="divSelections" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Selections'}">

        <!-- Content -->

    </div>
    <div id="divInformation" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Other Information'}">

        <!-- Content -->

    </div>
    <div id="divHistory" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'History'}">

        <!-- Content -->

    </div>
    <div id="divDetails" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Details'}">

        <!-- Content -->

    </div>
</div>

---

当前没有直接的API来显示/隐藏

WinJS.UI.Pivot控件上的
WinJS.UI.PivotItems

根据所需的用户体验和显示/隐藏条件，您可以通过编程方式从
WinJS.UI.Pivot
控件上的
Pivot.items
属性返回的
PivotItems
列表中添加/删除
PivotItem

例如：

    function createPivotElement() {
        // Use document.createElement("div") to build up the DOM for the Pivot Item
        // Or you could render a page using the WinJS.UI.Pages API

        // Return a DOM element
        return document.createElement('div');
    }

    // When criteria is met...
    // Find the pivot in the DOM
    var p = document.querySelector(".myPivot");
    var pivot = p.winControl;


    var element = createPivotElement();
    var pivotItem = new WinJS.UI.PivotItem(element, { header: 'New PivotItem' });

    // Add new PivotItem
    // You could use other things like splice to add it to a specific index etc.
    pivot.items.push(pivotItem);

您还可以查看或上的更多用法示例