TabPanel Markup

The markup used to initialize TabPanel controls consists of one element per tab, each with two children: the tab header and the tab content.

We suggest you use anchor elements (tag a) for the tab headers because they are semantically more meaningful than plain div elements.

In this example, we added a "wj-state-active" class to the "America" pane markup. That defines the tab that is initially selected. Alternatively, we could have set the TabPanel's selectedIndex property.

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

TabPanelMarkupController.cs
TabPanelMarkup.cshtml

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

<h1>
    @Html.Raw(Resources.C1Nav.TabPanelMarkup_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelMarkup_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelMarkup_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelMarkup_Text3)
</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 class="wj-state-active">
            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>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>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")