Jitesh Byahut 2/15/2014 3209

How To Use JQuery Tabs

Here we are using JQuery tabs

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Jquery-tabs</title>

    <script src="../../Scripts/Jquery-ui/js/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="../../Scripts/Jquery-ui/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>

    <link href="../../Scripts/Jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />

    <script type="text/javascript">

        $(document).ready(function () {

             $("#divTab").tabs();

 

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div id="divTab" style="width:400px; height:200px">     

         <ul>

             <li><a href="#asp">Asp.Net</a></li>

             <li><a href="#csharp">C#</a></li>

             <li><a href="#jquery">JQuery</a></li>

             <li><a href="#javascript">Javascript</a></li>

             <li><a href="#sql">Sql Server</a></li>

        </ul>

        <div id="asp">This is Asp.Net page</div>

        <div id="csharp">This is C# page</div>

        <div id="jquery">This is JQuery page</div>

        <div id="javascript">This is Javascript page</div>

        <div id="sql">This is Sql Server page</div>

    </div>

    </form>

</body>

</html>

View output :

demo

You can open tabs on mouse over

    <script type="text/javascript">

        $(document).ready(function () {           

              $("#divTab").tabs({

                  event: "mouseover"

              });           

        });

    </script>

View Output :

demo


Please give your feedback for improving this page