Simple happiness

jquery选项卡代码

一直想写个漂亮实用的主题，可无奈自己技术不够，甚至可以说是门外汉，虽然前几日依着K2和iNove以及大量的插件差点改出一个主题来，但最终还是放弃了。对于技术，咱这个门外汉还是奉行“拿来主义”吧，一点一点充实之后再厚积薄发。

第一个充实的——选项卡。

如今选项卡这种方式可是很热门的，在网上一搜一大片，本着小博有可能会依赖于lightbox2的图片效果，于是搜起了jquery这个JS框架下的相关代码，在查看了N个后，进行整合，于是，下面的代码热气腾腾的出炉了，虽说这样的代码网上比比皆是，但我还是记录下来，如果您凑巧也喜欢，那尽管拿去好了。

<!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="cn" lang="cn"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Tabs</title>


<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

<!--

$(document).ready(function() {

	//When page loads

	$(".tab_content").hide(); //Hide all content

	$("ul.tabs li:first").addClass("active").show(); //Activate first tab

	$(".tab_content:first").show(); //Show first tab content
    var $div_li = $("ul.tabs li");

    $div_li.click(function(){

        $(this).addClass("active").siblings().removeClass("active");

        var index =  $div_li.index(this);  //Click access to the current elements in all the <li> elements in the index.

        $("div.tab_container > div").eq(index).show().siblings().hide();

    }).hover(function(){

        $(this).addClass("hover");

    },function(){

        $(this).removeClass("hover");

    });

});

-->

</script>

<style type="text/css">

<!-- menu start -->

ul.tabs {

	margin: 0;

	padding: 0;

	float: left;

	list-style: none;

	height: 32px;

	border-bottom: 1px solid #999;

	border-left: 1px solid #999;

	width: 100%;

}

ul.tabs li {

	float: left;

	margin: 0;

	padding: 0 20px;

	height: 31px;

	line-height: 31px;

	border: 1px solid #999;

	border-left: none;

	margin-bottom: -1px;

	overflow: hidden;

	position: relative;

	background: #e0e0e0;

	text-decoration: none;

	color: #000;

	display: block;

	font-size: 1.2em;

	outline: none;

	cursor: hand;

}

ul.tabs li.hover {

	background: #ccc;

}

ul.tabs li.active {

	background: #fff;

	border-bottom: 1px solid #999;

}

<!-- menu end -->

<!-- content start -->

.tab_container {

	border: 1px solid #999;

	border-top: none;

	overflow: hidden;

	clear: both;

	float: left; width: 100%;

	background: #fff;

}

.tab_content {

	padding: 20px;

	font-size: 1.2em;

}

<!-- content end -->

</style>

</head>

<body>

	<div class="menu">

		<ul class="tabs">

			<li>One</li>

			<li>Two</li>

			<li>Three</li>

		</ul>

	</div>

<div class="tab_container"> <div class="tab_content"> Content of the One! </div> <div class="tab_content"> Content of the Two! </div> <div class="tab_content"> Content of the Three! </div> </div> </body> </html>
代码很简单，不做太多说明了，留着备用。
哦，顺便庆祝一下PICASA终于正常了，我儿的照片又能显示了。