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.NET, How 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:
The output of the above code as shown in the below figure.
I already explained in the previous articles about Creating Dynamic CSS Menu From Database SQL Server in ASP.Net Using C#.Net/VB.NET, How 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