TabPanel Concepts

The TabPanel control enables content organization at a high level, such as switching between views, data sets, or functional aspects of an application.

Tabs are presented as a single row above their associated content. Tab headers succinctly describe the content within.

Tabs can be selected with the mouse or keyboard, and automatically update the content to reflect the current selection.

Each tab consists of a header element (always visible) and a pane element that contains the tab content. The pane element is visible when the corresponding header is selected with the mouse or keyboard.

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

TabPanelController.cs
TabPanel.cshtml

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

<h1>
    @Html.Raw(Resources.C1Nav.TabPanel_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.TabPanel_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanel_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanel_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanel_Text4)
</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")