基于javascript实现最简单的选项卡切换效果
作者：朱鹏-天羽 发布时间：2023-08-25 00:26:23
标签：js,选项卡,切换
本文实例为大家分享了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>
0
投稿猜你喜欢
- MySQL的本地备份和双机相互备份脚本：首先，我们需要修改脚本进行必要的配置,然后以root用户执行。◆1. 第一执行远程备份时先用 fir
- 本文讲解如何设置SQL Server数据库全文索引服务。在Microsoft SQL Server 7.0 中提供了全文索引服务(Full-
任何位置都能明确“我在哪里？这里有什么？从这里能去哪里？” 小时候，童话故事都告诉我们，迷路可不是一件好事。那会伴随着困惑、沮丧、- 导语：目前点评“2008年10佳改版网站”也许为时尚早，但2008年毕竟已经过去了9个多月，周四又同时有Twitter和FriendFeed
- VBScript似乎已经成为ASP服务器端开发的首先语言，VBScript函数库丰富、而且使用起来也很容易上手，即使平时不太编程的朋友，只要
- 本文实例为大家分享了Go实现文件上传和下载的具体代码，供大家参考，具体内容如下一.文件上传文件上传:客户端把上传文件转换为二进制流后发送给服
- 本文研究的主要是Python程序运行原理，具体介绍如下。编译型语言（C语言为例）动态型语言一个程序是如何运行起来的？比如下面的代码#othe
- gojson是快速解析json数据的一个golang包，你使用它可以快速的查找json内的数据安装 go get github.com/wi
- 工欲善其事，必先利其器。作为更专业的前端工程师，我们需要强劲的IDE协助我们写出规范、美观、漂亮的JavaScript代码，首先要作的就是对
- 前段时间和哥们胡侃的时候还说腾讯抄的有水平，不过这次我溴了，腾讯房产被新浪乐居给幽默了一把。乐居：http://bj.house.sina.
- 【代码示例】 [code=SQL] DELIMITER $$ DROP FU
- 要将身份证的正反面图片合并为一张图片，你可以使用PHP的GD库来完成。演示了如何合并两张图片下面是一个示例代码，演示了如何合并两张图片：//
- 原文地址：30 Days of Mootools 1.2 Tutorials - Day 12 - Drag and Drop using
- 1，WITH TEMPLET意思是，生成的页面架构将采用某个已设定的模板，在此之前我的一篇教程中介绍过，希望各位在看本教程之前对ASP采用模
- 我们大家都知道CSS功能的强大，而有关CSS基本的排版控制虽然已有详细的使用说明和参考教程，但还有许多丰富的CSS排版能力，是很少能查到的。
- 内容摘要：ASP开发人员为了在他们的设计项目中获得更好的性能和可扩展性而不断努力。幸运地是，有许多书籍和站点在这方面提供了很好的建议。但是这
- 以前写过《 10条影响CSS渲染速度的写法与建议》，今天放些数据出来，供参考；首先说明一点，CSS对网页的最后渲染出来的速度影响非
- 1）按笔画排序select * from Table order by nlssort(columnName,'NLS_SORT=S
- 代码如下:CREATE FUNCTION dbo.f_splitstr( @str varchar(8000) )RETURNS
- </pre><pre name="code" class="javascript"
