现在位置首页 / 前端开发 /正文

jQuery Tab选项卡 实现

作者: IT小兵 | 2016年5月10日| 热度:℃ | 评论: |参与:

需求:

        实现Tab选项卡切换,鼠标悬浮在标签上,进行Tab页面的切换


此处使用的是jQuery1.7.js

效果图如下

html实现代码如下:

<!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>

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=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>


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询