<html>
<head>
<title>tab标签</title>
</head>
<style type='text/css'>
*{ margin:0;
padding:0;
background-color:#ccc;
}
#main{
margin:30px auto;
width:400px;
height:300px;
border:2px solid ;
}
#nav{
width:400px;
height:20px;
}
#nav ul{
width:400px;
height:20px;
}
#nav ul li{
list-style:none;
display:inline;
width:80px;
height:18px;
line-height:18px;
margin-left:15px;
float:left;
}
#nav ul li a{
background-color:green;
border:2px solid #000;
color:red;
text-align:center;
text-decoration:none;
display:block;
}
#nav ul li a:hover{
background-color:#33cc55;
color:blue;
}
.cur{
z-index:100;
border-bottom:2px solid #yellow;
color:#00f;
}
#container{
background-color:#fff;
width:400px;
margin-top:15px;
text-align:center;
}
.sub-con{
height:220px;
display:none;
}
.cur-sub-con{
display:block;
}
</style>
</style>
<body>
<div id='main'>
<div id='nav'>
<ul>
<li><a href='#' class='cur'>tab1</a></li>
<li><a href='#'>tab2</a></li>
<li><a href='#'>tab3</a></li>
<li><a href='#'>tab4</a></li>
</ul>
</div>
<div id='container'>
<div class='sub-con cur-sub-con'>
aaaaaaaaaaaaaaa
</div>
<div class='sub-con'>
bbbbbbbbbbbbbbbb
</div>
<div class='sub-con'>
cccccccccccccccccc
</div>
<div class='sub-con'>
dddddddddddddddd
</div>
</div>
</body>
<script src='js/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var intervallID;
var curLi;
$("#nav li a").mouseover(function(){
curLi=$(this);
intervallID=setInterval(onMouseOver,100);
});
function onMouseOver(){
$(".cur-sub-con").removeClass("cur-sub-con");
$(".sub-con").eq($("#nav li a").index(curLi)).addClass("cur-sub-con");
$(".cur").removeClass("cur");
curLi.addClass("cur");
}
$("#nav li a").mouseout(function(){
clearInterval(intervallID);
});
$("#nav li a").click(function(){
clearInterval(intervallID);
$(".cur-sub-con").removeClass("cur-sub-con");
$(".sub-con").eq($("#nav li a").index(curLi)).addClass("cur-sub-con");
$(".cur").removeClass("cur");
curLi.addClass("cur");
});
});
</script>
</html>
分享到:
相关推荐
【Jquery经典特效6】js实现tab标签切换效果
CSS+JS实现tab标签切换
js实现tab标签切换效果是一款无需jQuery,原生javascript制作的tab切换效果。
js实现Tab标签切换源码,含左右切换,上下切换等,总共4种切换效果!
js实现Tab标签切换,很方便的表达了一个页面上的多个页面效果
使用原生JavaScript实现Tab标签切换的方法.pdf
js实现tab标签效果,在项目中经常用到,今天抽点时间把我写的js实现tab标签效果源码分享给大家,对js tab标签代码需要的朋友参考下 废话不多说了,直接给大家贴代码了: <html> <head> <meta ...
本文实例为大家分享了Bootstrap实现tab标签切换效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link...
TAB标签 大型网站 使用的TAB标签例子 下了不后悔
主要为大家详细介绍了JavaScript实现tab栏切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
JavaScript实现的带左右箭头的tab标签代码,tab里面可以放html代码,不限于文字
使用jquery 实现tab标签,比较实用。
js实现自适应宽度的tab标签导航。相关链接:tab标签图片切换特效。懒人之家推荐下载
主要介绍了最简单纯JavaScript实现Tab标签页切换的方式(推荐)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
js实现tab标签切换效果是一款无需jQuery,原生javascript制作的tab切换效果。
主要介绍了JavaScript实现Tab标签页切换的最简便方式(4种),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
javascript实现的淡入淡出效果的TAB标签源码
JavaScript实现的可暂定滚动的TAB标签代码
NULL 博文链接:https://xiaoa7.iteye.com/blog/280907