<!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>tab选项卡</title>
<link rel="stylesheet" href="css/css.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
body{font:12px,"宋体"}
*{margin:0; padding:0}
.tab{width:500px; margin:0 auto;}
h6{font-size:12px; border-bottom:1px solid #ccc; height:31px; }
h6 span{float:left; padding:0 15px; display:inline; margin-left:5px; cursor:pointer; line-height:30px; border:1px solid #ccc; border-bottom:1px solid #ccc; position:relative; margin-bottom:-2px;}
.current{ color:red; position:relative; z-index:999; border-bottom:1px solid #fff;}
.tab div{clear:both; display:none; height:300px; }
.tab .block{display:block;}
</style>
<script type="text/javascript">
$(function(){
$(".tab>h6>span").click(
function(){
$(this).addClass("current").siblings().removeClass("current");
$(".tab>div").eq($(".tab>h6>span").index(this)).show().siblings("div").hide();
}
)
})
</script>
</head>
<body>
<div class="tab">
<h6>
<span class="current">tab1</span>
<span>tab2</span>
<span>tab3</span>
<span>tab4</span>
</h6>
<div class="block">
内容一
</div>
<div>
内容二
</div>
<div>
内容三
</div>
<div>
内容四
</div>
</div>
</body>
</html>
分享到:
相关推荐
jQuery+css实现tab切换效果 jQuery+css实现tab切换效果源代码
有ajax,jquery实现tab效果
NULL 博文链接:https://lxzqz.iteye.com/blog/1876715
Jquery实现的tab效果,支持自定义html内容 2、支持ajax加载内容 3、回调函数
jQuery实现tab栏切换效果 本文实例为大家分享了jQuery实现tab栏切换效果的具体代码,供大家参考,具体内容如下 具体实现功能 1、切换选项卡 2、添加选项卡 3、删除选项卡 4、编辑选项卡 html结构 ...
jQuery实现的tab标签自动切换效果
JQuery单击实现TAB切换效果
【Jquery经典特效6】js实现tab标签切换效果
这是jquery的tab页效果的示例
jQuery实现定位滚动tab选项卡效果
js和jquery实现tab状态栏切换效果 今天做一个简单的小案例,用js和jquery分别去实现点击tab栏,实现切换的目的,效果如下图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> 状态...
使用JQuery技术实现的tab效果,它有四种不同的效果有鼠标感应,点击及缩展行
使用jquery的插件idTabs来实现Tab页效果,代码简单易用。
jquery实现蓝色登录页面带tab切换效果.zip
主要介绍了jquery实现tab选项卡切换效果,实现悬停、下方横线动画位移,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jquery+css Tab切换效果,可自定义切换效果
jQuery实现鼠标悬停效果tab选项卡特效.zip
通过jquery实现tab标签浏览效果