Tab: using JQuery and CSS

February 17, 2009 at 2:49 pm Leave a comment

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Learning Tab Creation</title>
<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.1.js”></script&gt;
<script type=”text/javascript”>
$(function(){
var tabcontainers = $(“div#tabber > div”);
tabcontainers.hide().filter(“:first”).show();

$(“ul#tabs a”).click(function(){
tabcontainers.hide();
tabcontainers.filter(this.hash).show();
return false;
}).filter(“:first”).click();
});
</script>
<style type=”text/css”>
.clear {
clear: both;
}
#tabs {
margin: 0;
padding: 0;
font: normal 12px Arial, Helvetica, sans-serif;
list-style-type: none;
clear: both;
width: 100%;
}
#tabs li {
float: left;
margin: 0 5px 0 0;
}
#tabs li a {
text-decoration: none;
color: #CCCCCC;
border: 1px solid #666666;
display: block;
background: #666666;
padding: 2px 5px;
}
#tabs li a:hover {
border: 1px solid #000000;
}
#first, #second, #third {
border: 5px solid #ffffff;
}
.active {
background: #000000;
}
</style>
</head>
<body>
<div id=”tabber”>
<ul id=”tabs”>
<li><a href=”#first”>First Page</a></li>
<li><a href=”#second”>Second Page</a></li>
<li><a href=”#third”>Third Page</a></li>
</ul>
<div id=”first” class=”clear”>
<p> First >>>>>>>>>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus lacus, vehicula in, viverra eget, varius vel, sapien. Sed et felis et urna vulputate pretium. Mauris mattis. Duis convallis justo vestibulum est. Nunc dapibus, nisl feugiat tincidunt suscipit, tellus neque porttitor libero, eu feugiat turpis dolor in magna. Quisque interdum lectus quis risus placerat aliquet. Nullam felis. Quisque lacus nulla, malesuada dignissim, ullamcorper sit amet, pellentesque et, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ac sem. Integer libero nunc, dignissim quis, dictum quis, tempor in, felis. Phasellus faucibus odio. Proin ultrices facilisis mi. Curabitur erat. Curabitur placerat commodo lorem. Proin hendrerit, est quis luctus condimentum, nisi neque blandit velit, in pharetra sem sapien aliquam lacus. Sed cursus lectus sed nisl. Curabitur consequat nisl sed nibh.</p>
</div>
<div id=”second” class=”clear”>
<p> Second >>>>>>>>>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus lacus, vehicula in, viverra eget, varius vel, sapien. Sed et felis et urna vulputate pretium. Mauris mattis. Duis convallis justo vestibulum est. Nunc dapibus, nisl feugiat tincidunt suscipit, tellus neque porttitor libero, eu feugiat turpis dolor in magna. Quisque interdum lectus quis risus placerat aliquet. Nullam felis. Quisque lacus nulla, malesuada dignissim, ullamcorper sit amet, pellentesque et, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ac sem. Integer libero nunc, dignissim quis, dictum quis, tempor in, felis. Phasellus faucibus odio. Proin ultrices facilisis mi. Curabitur erat. Curabitur placerat commodo lorem. Proin hendrerit, est quis luctus condimentum, nisi neque blandit velit, in pharetra sem sapien aliquam lacus. Sed cursus lectus sed nisl. Curabitur consequat nisl sed nibh.</p>
</div>
<div id=”third” class=”clear”>
<p> Third>>>>>>>>>>>>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus lacus, vehicula in, viverra eget, varius vel, sapien. Sed et felis et urna vulputate pretium. Mauris mattis. Duis convallis justo vestibulum est. Nunc dapibus, nisl feugiat tincidunt suscipit, tellus neque porttitor libero, eu feugiat turpis dolor in magna. Quisque interdum lectus quis risus placerat aliquet. Nullam felis. Quisque lacus nulla, malesuada dignissim, ullamcorper sit amet, pellentesque et, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ac sem. Integer libero nunc, dignissim quis, dictum quis, tempor in, felis. Phasellus faucibus odio. Proin ultrices facilisis mi. Curabitur erat. Curabitur placerat commodo lorem. Proin hendrerit, est quis luctus condimentum, nisi neque blandit velit, in pharetra sem sapien aliquam lacus. Sed cursus lectus sed nisl. Curabitur consequat nisl sed nibh.</p>
</div>
</div>
</body>
</html>

Advertisements

Entry filed under: CSS & JavaScript, jquery.

Combobox using Jquery Flash vs. Silverlight

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Tweets… :)

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

Categories

Feeds

Blog Stats

  • 20,580 hits

%d bloggers like this: