jquerytabs的实现代码_jquery

来源：懂视网责编：小采时间：2020-11-27 20:43:02

jquerytabs的实现代码_jquery

jquerytabs的实现代码_jquery:关键代码：代码如下:$(function(){ $(.tabs li).eq(0).css(background,#499AFF); $(.tabs div).eq(0).show(); $(.tabs>ul>li).click(function(i){ $(this).css(background,#499AFF)

推荐度：

点击下载本文 文档为doc格式

导读jquerytabs的实现代码_jquery:关键代码：代码如下:$(function(){ $(.tabs li).eq(0).css(background,#499AFF); $(.tabs div).eq(0).show(); $(.tabs>ul>li).click(function(i){ $(this).css(background,#499AFF)

关键代码：
代码如下:
$(function(){
$(".tabs li").eq(0).css("background","#499AFF");
$(".tabs div").eq(0).show();
$(".tabs>ul>li").click(function(i){
$(this).css("background","#499AFF").siblings().css("background","#ffffff");
$(".tabs div").eq($("li").index(this)).show().siblings("div").hide();
return false;
})
})

演示（请“运行代码”后，刷新一次）：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>jquery tab</title> 
<script language="javascript" type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></ script> 
<script language="javascript" type="text/javascript"> 
$(function(){ 
 $(".tabs li").eq(0).css("background","#499AFF"); 
 $(".tabs div").eq(0).show(); 
 $(".tabs>ul>li").click(function(i){ 
 $(this).css("background","#499AFF").siblings().css("background","#ffffff"); 
 $(".tabs div").eq($("li").index(this)).show().siblings("div").hide(); 
 return false; 
 }) 
}) 
</ script> 
<style type="text/css"> 
*{ 
 padding:0; 
 margin:0; 
} 
body{ 
 margin-left:100px; 
 margin-top:100px; 
} 
.tabs{ 
 width:250px; 
 height:300px; 
} 
.tabs ul{ 
 width:250px; 
 height:28px; 
} 
.tabs ul li{ 
 float:left; 
 width:50px; 
 height:28px; 
 color:white; 
 line-height:28px; 
 margin-right:10px; 
 text-align:center; 
} 
.tabs ul li a:link,.tabs ul li a:visited{ 
 color:black; 
} 
.tabs div{ 
 border:1px solid #499AFF; 
 display:none; 
} 
.tabs div a{ 
 display:block; 
 width:250px; 
 text-decoration:none; 
 margin-top:5px; 
 padding-left:10px; 
} 
a:link,a:visited{ 
 color:blue; 
 font-size:12px; 
 text-decoration:none; 
} 
a:hover{ 
 color:red; 
} 
li{ 
 list-style:none; 
} 
</style> 
</head>

<body> 
 
 
 <li>脚本之家</li> 
<li>脚本jb51</li> 
 
 
 脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家 
脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家 
脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家 
脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家 
脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家 
脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家 
脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家 
脚本之家脚本之家脚本之家脚本之家脚本之家脚本之家 
 
 
 脚本jb51.net脚本jb51.net脚本jb51.net脚本jb51.net 
脚本jb51.net脚本jb51.net脚本jb51.net脚本jb51.net 
脚本jb51.net脚本jb51.net脚本jb51.net脚本jb51.net 
脚本jb51.net脚本jb51.net脚本jb51.net脚本jb51.net 
脚本jb51.net脚本jb51.net脚本jb51.net脚本jb51.net 
脚本jb51.net脚本jb51.net脚本jb51.net脚本jb51.net 
脚本jb51.net脚本jb51.net脚本jb51.net脚本jb51.net 
脚本jb51.net脚本jb51.net脚本jb51.net脚本jb51.net

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jquerytabs的实现代码_jquery

推荐度：

点击下载本文 文档为doc格式

标签：实现代码 tab

热门焦点

jquerytabs的实现代码_jquery

jquerytabs的实现代码_jquery

jquerytabs的实现代码_jquery

最新推荐

猜你喜欢

热门推荐