How to Create Tab Control Using jQuery In Asp.Net

3 Comments | 1391 Views | Post by: Admin | Tags: Create Tab Control Using jQuery In Asp.Net, Create Tab Control


How to Create Tab Control Using jQuery In Asp.Net


Introduction

Here Pawan Kumar will explain How to Create Tab Control Using jQuery In Asp.Net

Description

In previous post I have explained Save data to database without postback using jQuery ajax in ASP.NET, How to set focus on first textbox of the page, Assign datepicker to runtime/dynamic textboxes in ASP.NET using jQuery, Show Asp.Net Gridview Row Details using Bootstrap Tooltip on MouseHover GridView Row Cell, Best 7 Resources for 3 tier architecture Asp.Net, Show Hide Password Using Javascript ASP.NET, and many more articles.

Now I will explain How to How to Create Tab Control Using jQuery In Asp.Net

So follow the steps to learn How to Create Tab Control Using jQuery In Asp.Net
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to Create Tab Control Using jQuery In Asp.Net</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <style>
        body {
            font-size: 11px;
        }
    </style>
    <script>
        $(function () {
            $("#countrytabs").tabs();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="countrytabs">
            <ul>
                <li><a href="#countrytabs-1">Regsiter</a></li>
                <li><a href="#countrytabs-2">Login</a></li>
                <li><a href="#countrytabs-3">Forgot Password</a></li>
            </ul>
            <div id="countrytabs-1">
                <p>
                    <h2>Tab 1 content 1</h2>
                </p>
            </div>
            <div id="countrytabs-2">
                <p>
                    <h2>Tab 2 content 2</h2>
                </p>
            </div>
            <div id="countrytabs-3">
                <p>
                    <h2>Tab 3 content 3</h2>
                </p>
            </div>
        </div>
    </form>
</body>
</html>

 

Conclusion:

So, In this tutorial we have learned, How to Create Tab Control Using jQuery In Asp.Net

Download Source Codes


Post Comments

if you have some suggestion, question, request on How to Create Tab Control Using jQuery In Asp.Net.

Please use the comment box to express your views.

 

Comments:

loading...