Basic tabs

(JQUERY)


Hi,
In this article, i will discuss about how to create simple tabs using jquery.

View:-

@{
    ViewBag.Title = "basicTab";
}

  <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
    <link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />

<h2>basicTab</h2>

<div id="div_tab">
    <ul>
        <li>
            <a href="#div_tab1">Tab1</a>
        </li>
        <li>
            <a href="#div_tab2">Tab2</a>
        </li>
        <li>
            <a href="#div_tab3">Tab3</a>
        </li>
    </ul>

    <div id="div_tab1">
        <h1>Inside tab1</h1>
    </div>
    <div id="div_tab2">
        <h1>Inside tab2</h1>
    </div>
    <div id="div_tab3">
        <h1>Inside tab3</h1>
    </div>
</div>


<script type="text/javascript">
    $(function () {

        $('#div_tab').tabs();

    });
</script>


Controller:-


  public ActionResult basicTab()
        {
            return View();
        }

Image

Ratings


Average Rating: 0.00 by 0 users
Giri Prasad
7/20/2013
7/20/2013
Download PDF

Comments