需求：
实现Tab选项卡切换，鼠标悬浮在标签上，进行Tab页面的切换
此处使用的是jQuery1.7.js
实现代码如下
<!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=gb2312" />
<title>增删改查</title>
<style type="text/css">
*{margin:0 auto;padding:0;list-style-type:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* tab */
#tab{width:400px;position:relative;margin:40px auto;}
#tab .tab_menu{width:100%;float:left;position:absolute;z-index:1;}
#tab .tab_menu li{float:left;width:96px;height:30px;line-height:30px;border:1px solid #ccc;border-bottom:0px;cursor:pointer;text-align:center;margin:0 2px 0 0;}
#tab .tab_box{width:395px;height:100px;clear:both;top:30px;float:left;position:relative;border:1px solid #CCC;background-color:#FF0;}
#tab .tab_menu .selected{background-color:yellow;cursor:pointer;}
.hide{display:none;}
.tab_box div{padding:10px;}
</style>
<script type="text/javascript" src="js/jQuery1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $tab_li = $('#tab ul li');
$tab_li.hover(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var index = $tab_li.index(this);
$('div.tab_box > div').eq(index).show().siblings().hide();
});
});
</script>
</head>
<body>
<!-- 代码 开始 -->
<div id="tab">
<ul class="tab_menu">
<li class="selected">查询</li>
<li>增加</li>
<li>更新</li>
<li>删除</li>
</ul>
<div class="tab_box">
<div>查询的内容</div>
<div class="hide">增加的内容</div>
<div class="hide">更新的内容</div>
<div class="hide">删除的内容</div>
</div>
</div>
<!-- 代码 结束 -->
</body>
</html>
效果图如下
如果要实现点击切换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=gb2312" />
<title>增删改查</title>
<style type="text/css">
*{margin:0 auto;padding:0;list-style-type:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* tab */
#tab{width:400px;position:relative;margin:40px auto;}
#tab .tab_menu{width:100%;float:left;position:absolute;z-index:1;}
#tab .tab_menu li{float:left;width:96px;height:30px;line-height:30px;border:1px solid #ccc;border-bottom:0px;cursor:pointer;text-align:center;margin:0 2px 0 0;}
#tab .tab_box{width:395px;height:100px;clear:both;top:30px;float:left;position:relative;border:1px solid #CCC;background-color:#FF0;}
#tab .tab_menu .selected{background-color:yellow;cursor:pointer;}
.hide{display:none;}
.tab_box div{padding:10px;}
</style>
<script type="text/javascript" src="js/jQuery1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $tab_li = $('#tab ul li');
$tab_li.click(
function(){
$(this).addClass('selected').siblings().removeClass('selected');
var index = $tab_li.index(this);
$('div.tab_box > div').eq(index).show().siblings().hide();
}
);
});
</script>
</head>
<body>
<!-- 代码 开始 -->
<div id="tab">
<ul class="tab_menu">
<li class="selected">查询</li>
<li>增加</li>
<li>更新</li>
<li>删除</li>
</ul>
<div class="tab_box">
<div>查询的内容</div>
<div class="hide">增加的内容</div>
<div class="hide">更新的内容</div>
<div class="hide">删除的内容</div>
</div>
</div>
<!-- 代码 结束 -->
</body>
</html>
时间： 2024-10-07 05:47:54