jQuery sliding tab
In this tutorial, i will teach you how to create a sliding tab using jQuery. You can use it in displaying your website content in tabs. Some sites use it for registration forms. This tutorial is very easy but it requires version 5 of the jQuery plugin. Please don't forget to leave comment, participate by working on our tutorials, and uploading them for the benefit of the entire community. Happy reading....VIEW SCREEN SHOT:
- jQuery-1.5.1.min.js
- Index.php - Sliding Tab
Index.php
<html><head>
<script src="jquery-1.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".menu").click(function(){
var X=$(this).attr('id');
if(X=='signup_link'){
$("#login_link").removeClass('select').addClass('idle');
$("#signup_link").removeClass('idle').addClass('select');
$("#login_form").slideUp();
$("#signup_form").slideDown();
}
else{
$("#signup_link").removeClass('select').addClass('idle');
$("#login_link").removeClass('idle').addClass('select');
$("#signup_form").slideUp();
$("#login_form").slideDown();
}
});
});
</script>
<style type="text/css">
.roundcorner{
-moz-border-radius: 12px; -webkit-border-radius: 12px;
border-radius: 12px; text-align:justify; font-size:14px;
}
.container{
width:96%; border:1px #cccccc solid; height:auto;
margin-left:0.5em; float:left;background-color:#ffffff;
margin-bottom:8px; margin-top:8px;
}
.form_title{
width:80%; float:left; margin-left:28%;
}
.form_title a{
text-decoration:none; padding:1px; width:25%;
margin-top:1em; float:left; margin-left:3px;
text-align:center; padding-bottom:5px; -moz-border-radius: 12px 12px 0 0;
-webkit-border-top-left-radius: 12px;-webkit-border-top-right-radius: 12px;
border-radius: 12px 12px 0 0; font-size:15px; font-stretch:1px;
}
#login_form,#signup_form{
margin:1em; margin-top:0em; padding:1em; height:auto;
background-color:efefef;
}
#login_form input{ margin-left:2em}
#login_button{
width:auto; height:auto; padding:4px; background-color:#666666;
color:#FFFFFF; float:left; margin-left:11em; cursor:pointer;
}
.select{background-color:#efefef;color:pink}
.idle{background-color:#cccccc; color:red}
</style>
</head>
<body>
<div style="background-color:#efefef; margin-left:10em; height:auto; float:left; border-bottom:1px dotted #666633; width:30%;">
<div class="roundcorner container">
<div class="form_title">
<a href="#" id="login_link" class="menu select">Login</a>
<a href="#" id="signup_link" class="menu idle">Signup</a>
</div>
<br><br>
<div style="clear:both" id="login_form">
MEMBERS' LOGIN: Enter valid data below
<p/><label>Exam Code: </label><input type="text"/>
<p/><label>Password: </label> <input type="password"/>
<p/><label>Remember me on this computer </label><input style="margin-left:1.5em" type="checkbox"/>
<p/><div id="login_button" class="roundcorner">Login</div>
<br/>
</div>
<div style="clear:both; display:none" id="signup_form">
NEW USER REGISTRATION PAGE
<p/><label>Exam Code: </label><input type="text"/>
<p/><label>Full Name: </label> <input type="text"/>
<p/><label>Password: </label> <input type="password"/>
<p/><div id="login_button" class="roundcorner">Sign Up</div>
<br/>
</div>
</div>
</div>
</body>
</html>
KEYWORD: JQuery tabSiding tab using jquery, Sliding tab tutorial
