চন্দ্রদীপ: এপ্রিল 2013

In this tutorial you can make more page by jquery tab.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>

<style type="text/css">
ul.ul_requests { text-decoration:none;}
ul.ul_requests li {display:inline; margin-right:20px;}
ul.ul_requests li a { color:Green; text-decoration:none;}
ul.ul_requests li a:hover { color:red; text-decoration:none;}

html ul.ul_requests li.active, html ul.ul_requests li.active a:hover {
background: red;
border:none;
color:white;
}
</style>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
//Hide all content
$(".tab_content_bid").hide();
//Activate first tab
$("ul.ul_requests li:first").addClass("active").show();
//Show first tab content
$(".tab_content_bid:first").show();

//On Click Event
$("ul.ul_requests li").click(function() {
//Remove any "active" class
$("ul.ul_requests li").removeClass("active");

//Add "active" class to selected tab
$(this).addClass("active");

//Hide all tab content
$(".tab_content_bid").hide();

//Find the rel attribute value to identify the active tab + content
var activeTab = $(this).find("a").attr("href");

//Fade in the active content
$(activeTab).fadeIn();
return false;
});
});
</script>
</head>
<body>
<ul class="ul_requests">
<li><a href="#tabrequesta">Cover Letter</a></li>
<li><a href="#tabrequestb">Attachment</a></li>
</ul>
<div class="tab_container_request">
<div id="tabrequesta" class="tab_content_bid" style="margin-top:0px; padding:0px;">
<p>This is a first Tab
</div>
<div style="clear:both"></div>

<div id="tabrequestb" class="tab_content_bid">
<h2>About</h2>
<p>This is a about page</p>
</div>
</div>
</body>
</html>

চন্দ্রদীপ

শনিবার, ২৭ এপ্রিল, ২০১৩

Jquery TAB

আমার সম্পর্কে