Monday, 7 October 2013

Create Menu Tabs in ASP.NET using JQuery| Create a Tab control using JQuery in ASP.NET

Hi friends,in this article I will explain about Create Menu Tabs in ASP.NET using JQuery| Create a Tab control using JQuery in ASP.NET.
I already explained in the previous articles about Creating Dynamic CSS Menu From Database SQL Server in ASP.Net Using C#.Net/VB.NETHow to create Fixed Menu When Scrolling Page with CSS and jQuery or JQuery - Leave menu bar fixed on top when scrolled or Creating a Floating Navigation Menu and MVC Jquery UI accordion expand/collaspe all in ASP.NET

In ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Creating Menu Tabs Using JQuery </title>  
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
       $(function () {
           $("#tabs").tabs();
       });
  </script>
  <style type ="text/css" >
  .clr
  {
      color:Green;
      background-color:red ;
      width:500px;
      depth:500px;
  }
  </style>
</head>
<body>

<div id="tabs" class ="clr">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <div id="home" class="clr">
    <p>This is the Home Tab</p>
  </div>
  <div id="about" class="clr">
    <p>This is the About Tab</p>
  </div>
  <div id="contact" class="clr">   
    <p>This is the Contact Tab</p>
  </div>
</div>
 
</body>
</html>



The output of the above code as shown in the below figure.

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.