基于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
投稿猜你喜欢
- TensorFlow提供了TFRecords的格式来统一存储数据，理论上，TFRecords可以存储任何形式的数据。TFRecords文件中
- 背景最近用uni-app开发小程序项目时，部分需要持久化的内容没法像其他vuex中的state那样调用，所以想着自己实现一下类似vuex-p
本文会把学习过程中遇到的一些小问题和解决办法放在这里，以便于大家能够更好地学习python。一、Python的异常处理因为想到自己不断尝试写- 引言继上一篇 《Blender Python 编程：快速入门》 我们已经了解了 Blender Python 脚本的基本概念。接下来让我们了
- Python中可以使用 pickle 模块将对象转化为文件保存在磁盘上，在需要的时候再读取并还原。具体用法如下：pickle是Python库
- MySql版本问题sql_mode=only_full_group_by查看sql_modeselect @@sql_mode查询出来的值为
- eval是Python的一个内置函数，这个函数的作用是，返回传入字符串的表达式的结果。想象一下变量赋值时，将等号右边的表达式写成字符串的格式
- 本文实例讲述了php延迟静态绑定的方法。分享给大家供大家参考。具体分析如下：php延迟静态绑定：指类的self，不是以定义时为准，而是以计算
- 先前在DW教学－Dreamweaver量身打造Wordpress留言板（一） 教学文章中，已经成功的把前端留言机制与界面搞定了，虽然有了留言
- 前段时间由于收集视频数据的需要，自己捣鼓了一个YouKu视频批量下载的程序。东西虽然简单，但还挺实用的，拿出来分享给大家。版本：Python
- 想弄个截屏工具，整理一下学生错题什么的，原来用的方法是：先运行QQ，再监听键盘热键（“ctrl+alt+a”）。后来发现有些问题：需要先上Q
- QPS原理：每天80％的访问集中在20％的时间里，这20％时间叫做峰值时间。公式：( 总PV数 * 80％ ) / ( 每天秒数 * 20％
- 最近在使用爬虫爬取数据时，经常会返回403代码，大致意思是该IP访问过于频繁，被限制访问。限制IP访问网站最常用的反爬手段了，其实破解也很容
- 第一种是最传统的写法，用存储过程中的变量作为分页的乘数 代码如下:[c-sharp] view plaincopyprint?create
- 学习JQUERY就应该从最基本的学起，基本的就应该是语法了，在这里，我们有必要先温习一下JAVASCRIPT的一些知识。语法就不用说了，都是
- 前言在启动 Django 项目时，Django 默认监听的端口号为 8000，设置的默认 IP 地址为 127.0.0.1 。如果需要修改默
- 本文实例讲述了Python面向对象程序设计之私有属性及私有方法。分享给大家供大家参考，具体如下：如果有一个对象，当需要对其进行修改属性时，有
- 简介在生产环境上，为了避免数据的丢失，通常情况下都会定时的对数据库进行备份。而Linux的crontab指令则可以帮助我们实现对数据库定时进
- 在域环境下我没配置成果，也许是域用户的原因，因为我在生产环境下搞的，更改域用户需要重启SQLServer ，所以这个方法放弃了，只能用证书形
- 新建项目如下图，比如sigma目录是我要上传的项目，在six-sigma目录下新建三个文件，分别是LICENSE也就是开源协议，README
