用js和css实现选项卡效果+jq(2019-10-09)
1效果图：
2代码：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选项卡效果</title>
<link rel="stylesheet" href="../css/tab-list.css">
</head>
<body>
<div class="main">
<ul id="option">
<li onclick="setTab(0)">第一张</li>
<li onclick="setTab(1)">第二张</li>
<li class="active" onclick="setTab(2)">第三张</li>
<li onclick="setTab(3)">第四张</li>
</ul>
<ul id="content">
<li>第一张内容</li>
<li>第二张内容</li>
<li class="active">第三张内容</li>
<li>第四张内容</li>
</ul>
</div>
<script src="../js/tab-list.js"></script>
</body>
</html>
css:
*{
padding:;
margin:;
list-style:none;
}
.main{
width:100%;
margin-top:50px;
}
#option{
height:38px;
line-height:38px;
border:1px solid darkgray;
width:396px;
margin: 0 auto;
border-radius:5px 5px 0 0;
}
#option li{
float:left;
height:38px;
width:99px;
text-align: center;
background-color:darkkhaki;
border-right:1px solid dargray;
cursor: pointer;
}
#option li.active{
background-color:blue;
}
#content{
border:1px solid darkgray;
border-top:none;
width:396px;
margin: 0 auto;
border-radius:0 0 5px 5px;
}
#content li{
display:none;
height:200px;
line-height:200px;
text-align: center;
}
#content li.active{
display:block;
}
js:
var options = document.getElementById("option").getElementsByTagName("li");
var contents = document.getElementById("content").getElementsByTagName("li");
function setTab(n){
for(let i=0;i<options.length;i++){
if(i==n){
options[i].className="active";
contents[i].style.display="block";
}else{
options[i].className="";
contents[i].style.display="none";
}
}
}
3总结：
总的来说，还是用js选中点击的元素，在修改css样式。
学习到的css属性：
1:border-radius:圆角
border-radius:5px;对四个角设置圆角属性
border-radius:5px 0;对左上和右下角设置圆角属性
border-radius:0 0 5px 5px;对右下角和左下角设置圆角属性
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角（顺时针顺序）。
cursor：pointer;一只手
cursor：wait;转圈圈
cursor：text;文本
3:display:none;隐藏元素，同时被隐藏的元素不影响页面上的其他元素。
4 补充（2019-10-09），jq实现
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选项卡效果</title>
<link rel="stylesheet" href="../css/tab-list.css">
<script src="../js/lib/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="main">
<ul id="option">
<li class="active">第一张</li>
<li>第二张</li>
<li>第三张</li>
<li>第四张</li>
</ul>
<ul id="content">
<li class="active">第一张内容</li>
<li>第二张内容</li>
<li>第三张内容</li>
<li>第四张内容</li>
</ul>
</div>
<script src="../js/tab-list.js"></script>
</body>
</html>
js:
$("ul#option li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
$("ul#content li").eq(index).addClass("active").siblings().removeClass("active");
})
总结：
1先选取要触发的区域
2获取点击的dom节点并获取index位置
3对应内容的index的dom节点修改
用js和css实现选项卡效果+jq(2019-10-09)的更多相关文章
- js进阶 11-21 纯css实现选项卡
js进阶 11-21 纯css实现选项卡 一.总结 一句话总结:核心原理,a标签的锚点效果+父div限宽+多的部分隐藏. 1.如何实现a标签的锚点效果? href属性找到对应的位置就好,和选择器一样, ...
- 原生JS、CSS实现的转盘效果（目前仅支持webkit）
这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...
- CSS3及JS简单实现选项卡效果（适配手机端和pc端）
想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- Javascript进阶篇——总结--DOM案例+选项卡效果
断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...
- 使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- Vue 框架-06-条件语句 v-if 实现选项卡效果
Vue 框架-06-条件语句 v-if 实现选项卡效果 本片介绍的是 Vue 中条件语句 v-if 第一个小实例是,通过 v-if="布尔值",通过布尔值的真假来决定,某元素是否显 ...
随机推荐
- Redis 的底层数据结构（跳跃表）
字典相对于数组,链表来说,是一种较高层次的数据结构,像我们的汉语字典一样,可以通过拼音或偏旁唯一确定一个汉字,在程序里我们管每一个映射关系叫做一个键值对,很多个键值对放在一起就构成了我们的字典结构. ...
- 两台CentOS6.5 在不同机器上互联
准备工作 1.安装vmware及虚拟机centos6.5: 2.将安装好的centos6.5复制一份,在另一台机器上拷贝. 要进行不同机器上虚拟机的互相通信,需要用桥接模式进行互联.如下图,对vmwa ...
- XCTF-CAT
果然还是我太菜了呜呜呜,这道题仍然是没有自己做出来.哎. 这一道用的并不是PHP的环境,而是用Python中的Django编写的. 记得做过类似的一道题目.来源于MOCTF中的网站扫描器,当时做完后其 ...
- ORM查询简化
文章出处 https://www.cnblogs.com/wupeiqi/articles/6216618.html 字段 常用字段 AutoField(Field) - int自增列,必须填入参数 ...
- 基于 HTML5 的工控物联网的隧道监控实战
前言 监控隧道内的车道堵塞情况.隧道内的车祸现场,在隧道中显示当前车祸位置并在隧道口给与提示等等功能都是非常有必要的.这个隧道 Demo 的主要内容包括:照明.风机.车道指示灯.交通信号灯.情报板.消 ...
- mysqlbinlog增量恢复（基于使用事件位置position的恢复）
1.在xtrabackup 备份+还原文章中我们记录了备份到的binlog文件名和position点位置使用如下命令就可以进行增量的恢复了shell> mysqlbinlog --stop-po ...
- cobalt strike笔记-CS与MSF,Armitage,Empire互转shell
0x01 Metasploit派生shell给Cobaltstrike 生成木马: msfvenom -p windows/meterpreter/reverse_tcp -e x86/shikata ...
- insert into select 引起的 "子查询返回的值不止一个。当子查询跟随在**之后，或子查询用作表达式时，这种情况是不允许的"
目录 1.事故现场 1.1 在使用 Insert into Table2 select * from Table1 将表1的数据插入到表2时,报错如下: 1.2 sql 语句 2.推测 3.解决方案 ...
- Java 异常处理的 20 个最佳实践，你知道几个？
异常处理是 Java 开发中的一个重要部分,是为了处理任何错误状况,比如资源不可访问,非法输入,空输入等等.Java 提供了几个异常处理特性,以try,catch 和 finally 关键字的形式内建 ...
- ESP8266开发之旅 网络篇① 认识一下Arduino Core For ESP8266
博主的 ESP8266开发之旅 专栏主要分为三个部分: 基础篇 网络篇 应用篇 从这一篇开始,博主将会带领各位读者在基础篇的基础上进入网络的世界.在此,博主认为各位读者已经具备以下前提 ...