JQuery实现tab切换效果(二)

SC-SEO.COM 写于 2010-02-23 在 17:42

前段时间我们用 JQuery 实现了 Tab 的效果，这里再列举一个版本，可以实现相同的效果。

前段时间我们用 JQuery 实现了 Tab 的效果，具体见：JQuery实现tab切换效果，这里再列举一个版本，可以实现相同的效果。

效果图如下：

实现代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8″ />
<title>XHTML1.0</title>
<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”></script>
<script type=“text/javascript”>
$(function(){
var tab_menu_li = $(‘.tab_menu li’);
$(‘.tab_box div:gt(0)’).hide();

tab_menu_li.mouseover(function(){
$(this).addClass(‘selected’)
.siblings().removeClass(‘selected’);

var index = tab_menu_li.index(this);
$(‘.tab_box div’).eq(index).show()
.siblings().hide();
}).hover(function(){
$(this).addClass(‘hover’);
},function(){
$(this).removeClass(‘hover’);
});
});
</script>

<link rel=“stylesheet” type=“text/css” href=“.css” />
<style type=“text/css”>
*{ margin:0; padding:0;}
body{ font:11px Verdana, Geneva, sans-serif; padding:10px;}
ul{list-style:none;}

.tab{ width:300px; margin-bottom:10px;}
.tab_menu{ height:1%; overflow:hidden;}
.tab_menu li{ float:left; padding:2px 10px; margin-right:1px; border:1px solid #fc0;border-bottom:none; cursor:pointer;}
.tab_box{ height:150px; border:1px solid #fc0; background:#ff6; overflow:hidden; }
.tab_box div{ padding:5px;}
.selected{ background:#fc0;}
.hidden{ display:none;}
.hover{ background:#f60; color:white;}

margin-right:5px; cursor:pointer;}
</style>
</head>
<body>
<div class=“tab”>

<div class=“tab_menu”>
<ul>
<li class=“selected”><span>xhtml</span></li>
<li><span>css</span></li>
<li><span>javascript</span></li>
</ul>
</div>

<div class=“tab_box”>
<div>xhtml</div>
<div>css</div>
<div>javascript</div>
</div>
</div>

</body>
</html>

这篇文章的类别属于前端设计http://www.sc-seo.com/html/jquery-tab-2.html

文章标签:


»请您评论：

成都易搜SEO网站优化团队与网络营销专家，专业品质值得信赖。