本文实例为大家分享了js选项卡切换效果的具体实现代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>朱朱制作</title>
<script src="js/jquery.js" type="text/javascript"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #fff;
font-family: "微软雅黑";
font-size: 18px;
width: 1000px;
margin: 50px auto;
color:#000000;
}
.wrapper{
width: 350px;
}
#nav ul{
border-bottom: 2px solid yellowgreen;
height: 32px;
}
#nav li{
display: inline-block;
border: 2px solid #999;
border-bottom: none;
margin-left: 10px;
width: 65px;
text-align: center;
line-height: 30px;
}
#nav li:hover{
cursor: pointer;
}
#content{
display: block;
border: 1px solid blue;
border-top: none;
text-align: center;
height: 100px;
line-height: 100px;
}
#nav li.on{
border-bottom: solid 2px #ffffff;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<script type="text/javascript">
/*window.onload=change; //js代码实现
function change(){
this.nav=document.getElementById("nav");
this.li=nav.getElementsByTagName("li");
this.cont=document.getElementById("content");
this.divi=cont.getElementsByTagName("div");
for(var i=0;i<li.length;i++){
li[i].index=i;
li[i].onclick=function(){
for(var i=0;i<li.length;i++){
li[i].className="";
divi[i].className="hide";
}
li[this.index].className="on";
divi[this.index].className="show";
}
}
}*/
$(function(){
$('#nav li').each(function(){
$(this).click(function(){
$('#nav li').removeClass("on");
$(this).addClass("on");
$("#content div").removeClass();
$("#content div").eq($(this).index()).addClass("show").siblings().addClass("hide");
})
})
})
</script>
<body>
<div class="wrapper">
<div id="nav">
<ul>
<li class="on">num1</li>
<li>num2</li>
<li>num3</li>
<li>num4</li>
</ul>
</div><div id="content">
<div class="show">content1</div>
<div class="hide">content2</div>
<div class="hide">content3</div>
<div class="hide">content4</div>
</div>
</div>
</body>
</html>
标签：js,选项卡,切换
0
投稿猜你喜欢
python http通信接口开发示例
2022-06-07 05:15:29
超半数中文网页一年内将“消失”
2008-03-08 12:49:00
一个非常实用的php文件上传类
2023-08-15 17:04:56
python执行使用shell命令方法分享
2022-03-30 01:02:18
如何在向量化NumPy数组上进行移动窗口
2023-04-23 08:26:55
程序员的八种境界，你在哪一境？
2022-07-19 11:22:19
基于OpenCV(python)的实现文本分割之垂直投影法
2023-11-17 08:45:39
Sun正式发布MySQL 5.1版 简化数据库应用
2008-12-11 15:15:00
优雅地扩大链接响应区域
2010-09-25 13:04:00
一文教你如何用Python轻轻松松操作Excel,Word,CSV
2021-11-20 22:47:52
英文罚抄引发的艺术创意
2008-05-13 12:02:00
SQL CASE 表达式的具体使用
2024-01-28 09:57:29
ASP读取日期单日期自动补零函数代码
2011-02-20 10:39:00
python 算法 排序实现快速排序
2022-09-04 03:20:17
pytorch中tensor张量数据类型的转化方式
2022-03-19 20:07:24
Python在线和离线安装第三方库的方法
2023-08-24 19:37:11
Go语言实现彩色输出示例详解
2023-09-14 01:19:45
教你用python提取txt文件中的特定信息并写入Excel
2021-02-11 00:41:41
数字人组件反写[asp组件开发实例1]
2009-06-09 13:10:00
Dreamweaver量身打造Wordpress留言板
2009-12-09 17:08:00
