Disabled and Invisible Tabs

You can disable or hide individual tabs using the Tab's isDisabled and isVisible properties.

Invisible and disabled tabs cannot be selected by the user.

Africa America Asia Europe Oceania

Algeria
Angola
Benin
Botswana

Canada
Chile
Mexico
United States

China
Korea
India
Japan

Austria
England
France
Germany
Netherlands
Switzerland

Australia
Fiji
New Zealand
Samoa

Disable Europe

Show Oceania

// This file locates: "Scripts/Lesson/C1Nav/TabPanelDisabledInvisibleTabs.js".
c1.documentReady(function () {
    var theTabPanel = wijmo.Control.getControl('#theTabPanel');
 
    // toggle Europe's disabled state
    document.getElementById('disableEurope').addEventListener('click', function (e) {
        theTabPanel.getTab('tab-europe').isDisabled = e.target.checked;
    });
 
    // toggle Oceania's visibility
    document.getElementById('showOceania').addEventListener('click', function (e) {
        theTabPanel.getTab('tab-oceania').isVisible = e.target.checked;
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Adding
        public ActionResult TabPanelDisabledInvisibleTabs()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Nav.TabPanelDisabledInvisibleTabs_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelDisabledInvisibleTabs_Text1)
     
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelDisabledInvisibleTabs_Text2)
</p>
 
<div id="theTabPanel">
    <div>
        <a>Africa</a>
        <div>
            <ul>
                <li>Algeria</li>
                <li>Angola</li>
                <li>Benin</li>
                <li>Botswana</li>
            </ul>
        </div>
    </div>
    <div>
        <a>America</a>
        <div>
            <ul>
                <li>Canada</li>
                <li>Chile</li>
                <li>Mexico</li>
                <li>United States</li>
            </ul>
        </div>
    </div>
    <div>
        <a>Asia</a>
        <div>
            <ul>
                <li>China</li>
                <li>Korea</li>
                <li>India</li>
                <li>Japan</li>
            </ul>
        </div>
    </div>
    <div>
        <a id="tab-europe" class="wj-state-disabled">Europe</a>
        <div>
            <ul>
                <li>Austria</li>
                <li>England</li>
                <li>France</li>
                <li>Germany</li>
                <li>Netherlands</li>
                <li>Switzerland</li>
            </ul>
        </div>
    </div>
    <div>
        <a id="tab-oceania">Oceania</a>
        <div>
            <ul>
                <li>Australia</li>
                <li>Fiji</li>
                <li>New Zealand</li>
                <li>Samoa</li>
            </ul>
        </div>
    </div>
</div>
@Html.C1().TabPanel("#theTabPanel")
 
<div class="options">
    <label for="disableEurope">
        Disable Europe
    </label>
    <input id="disableEurope" type="checkbox" checked>
</div>
<div class="options">
    <label for="showOceania">
        Show Oceania
    </label>
    <input id="showOceania" type="checkbox" checked>
</div>