用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="布尔值",通过布尔值的真假来决定,某元素是否显 ...
随机推荐
- C#常见的算法面试题
一.求以下表达式的值,写出您想到的一种或几种实现方法: 1-2+3-4+……+m //方法一,通过顺序规律写程序,同时也知道flag标志位的重要性. static int F1(int m) { in ...
- .NET Core ❤ gRPC
这篇内容主要来自Microsoft .NET团队程序经理Sourabh Shirhatti的博客文章:https://grpc.io/blog/grpc-on-dotnetcore/, .NET Co ...
- python常用算法学习（4）——数据结构
数据结构简介 1,数据结构 数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成.简单来说,数据结构就是设计数据以何种方式组织并存贮在计算机中.比如:列表,集合与字 ...
- Maven项目下使用log4j
Apache Log4j是一个基于Java的日志记录工具,它的日志级别按下面顺序递减: 级别 描述 OFF 最高级别,用于关闭日志记录. FATAL 将导致应用程序提前终止的严重错误的信息将立即呈现在 ...
- Android OkHttp + Retrofit 下载文件与进度监听
本文链接 下载文件是一个比较常见的需求.给定一个url,我们可以使用URLConnection下载文件. 使用OkHttp也可以通过流来下载文件. 给OkHttp中添加拦截器,即可实现下载进度的监听功 ...
- u盘安装操作系统相关
首先使用相关软件制作u盘启动盘,将所需要的系统镜像安装到u盘中 此时u盘中会出现一个EFI区(window可以看到,window7看不到,可以隐藏) 简单来说这个EFI分区中装的是一个低价的操作系统, ...
- Jenkins介绍
持续集成: 持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证 ...
- 懒要懒到底，能自动的就不要手动，Hibernate正向工程完成Oracle数据库到MySql数据库转换（含字段转换、注释）
需求描述 需求是这样的:因为我们目前的一个老项目是Oracle数据库的,这个库呢,数据库是没有注释的,而且字段名和表名都是大写风格,比如 在代码层面的po呢,以前也是没有任何注释的,但是经过这些年,大 ...
- PHPStorm 10 配置PHPUnit
PHPStorm 10 配置PHPUnit PHPUnit的安装 自己用的是Xampp,PHPUnit好像自带不好用. 不说废话: 自己看 According to official site htt ...
- vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大
从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...