<!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;"/>
<title>exercise for tab</title>
<style type="text/css">
*{margin:0;padding:0}
.menu{width:500px;margin:20px;auto;}
.menu a{display:inline-block;width:100px;height:35px;line-height:35px;text-align:center;color:#000;background:#aaa;}
.menu a.curr{background:green;color:#fff;font-weight:bold;}
.text{width:490px;height:180px;padding:5px;border:1px solid #aaa;}
.hide{display:none;}
</style>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$(".menu a").click(function(){
$(this).addClass("curr").siblings().removeClass("curr");
$(".text div").eq($(".menu a").index(this)).show().siblings().hide();
});
});
</script>
</head>
<body>
<div class="menu">
<a href="#" class="curr">Tab1</a>
<a href="#">Tab2</a>
<a href="#">Tab3</a>
<a href="#">Tab4</a>
<div class="text">
<div>这是tab1</div>
<div>这是tab2</div>
<div>这是tab3</div>
<div>这是tab4</div>
</div>
</div>
</body>
<html>
一个简单的tab切换
最新推荐文章于 2023-08-08 09:41:16 发布