Tab container example in HTML or HTML Tab container example with javascript

Tab container example in HTML or HTML Tab container example with javascript. Demo:
HTML tab container
Introducation

In this example Iam Going to explain  how to create HTML Tab Container .

 If you want to create HTML Tab container You have add 3 javascript file references on top.

     <script src="../js/ver_tabs.js" type="text/javascript"></script>
     <script src="../js/jquery.min.js" type="text/javascript"></script>
     <script src="../js/jquery.tabify.js" type="text/javascript"></script>


 and also  you have to  add javascript for this 

<script type="text/javascript">
        $(document).ready(function () {
        //UL class id
            $('#Details').tabify();
        });
    </script>

Your Aspx Page Should be like this:


<head runat="server">
  
    <title>HTML Tab Container</title>
    <script src="../js/ver_tabs.js" type="text/javascript"></script>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/jquery.tabify.js" type="text/javascript"></script>
  
    <style type="text/css">
        .viewTabs
        {
            padding: 0;
            clear: both;
        }
        .viewTabs li
        {
            display: inline;
        }
        .viewTabs li a
        {
            background: #FFF;
            margin: 0 5px 0 0;
            padding: 10px;
            float: left;
            border: 1px solid #DDD;
            border-bottom: none;
            text-decoration: none;
            color: #000;
            font-weight: bold;
            font-size: 12px;
        }
        .viewTabs li.active a
        {
            background: #15acdb;
            color: #FFF;
        }
        .content
        {
            float: left;
            clear: both;
            border: 1px solid #DDD;
            background: #fff;
            padding: 1% 2%;
            width: 100%;
        }
    </style>
   
    <script type="text/javascript">
        $(document).ready(function () {
        //UL class id
            $('#Details').tabify();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       
        <ul id="Details" class="viewTabs">
            <li class="active"><a href="#Tab1">Tab1</a></li>
            <li><a href="#Tab2">Tab2</a></li>
            <li><a href="#Tab3">Tab3</a></li>
            <li><a href="#Tab4">Tab4</a></li>
        </ul>


        <div id="Tab1" class="content">
            <table style="width: 50%; border: none;">
                <tr>
                    <td>
                        First Name:
                    </td>
                    <td>
                        <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Second Name:
                    </td>
                    <td>
                        <asp:TextBox ID="txtSecondName" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        City:
                    </td>
                    <td>
                        <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </div>
        <div id="Tab2" class="content" runat="server">
            <table style="width: 50%; border: none;">
                <tr>
                    <td>
                        First Name:
                    </td>
                    <td>
                        Ram
                    </td>
                </tr>
                <tr>
                    <td>
                        Second Name:
                    </td>
                    <td>
                        Sai
                    </td>
                </tr>
                <tr>
                    <td>
                        City:
                    </td>
                    <td>
                        Hyderabad
                    </td>
                </tr>
            </table>
        </div>
        <div id="Tab3" class="content" runat="server">
            This Information is belongs to Tab3
        </div>
        <div id="Tab4" class="content" runat="server">
            This Information is belongs to Tab4
        </div>
    </div>
    </form>
</body>
</html>

No comments: