用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="布尔值",通过布尔值的真假来决定,某元素是否显 ...
随机推荐
- 5G 时代，云计算迎来新风口
云计算是对传统IT模式从底层硬件到业务模式的颠覆,传统IT市场具备万亿级市场空间,目前云计算收入占IT支出占比尚小,渗透率较低,未来空间较大. 短期受到宏观经济等因素影响,云巨头资本开支增速有所波动, ...
- JDK-基于Windows环境搭建
JDK安装: 毋庸置疑你要跑java程序,肯定少不了JDK,如jemter还有还有~ 下载jdk地址1:https://pan.baidu.com/s/1FIvGNvZSy0EpCBxHCz07nA ...
- Linux上的Nginx上设置支持PHP的解析
当前的运行环境为,PHP7.2.2以 FastCGI 模式运行,默认端口为:9000,Nginx1.15.6 打开nginx配置文件 vi /usr/local/nginx/conf/nginx.co ...
- maven在线自动更新太慢怎么办？
使用IDEA和Eclipse开发maven项目时,maven在添加一项新的依赖时,如果发现本地仓库没有,就会向位于国外服务器的中央仓库下载.如果所处网络没有翻墙,下载速度会慢到你想原地爆炸. 这个时候 ...
- Jenkins构建Jmeter项目之源代码管理（SVN）
1.查看项目创建中是否又svn插件,没有的话下载插件subversion 2.配置svn源代码管理,如下图(testcases目录下包含build.xml和脚本文件) 3.查看Jenkins本地工作空 ...
- JavaScript ES6函数式编程（二）：柯里化、偏应用和组合、管道
上一篇介绍了闭包和高阶函数,这是函数式编程的基础核心.这一篇来看看高阶函数的实战场景. 首先强调两点: 注意闭包的生成位置,清楚作用域链,知道闭包生成后缓存了哪些变量 高阶函数思想:以变量作用域作为根 ...
- procdump64+mimikatz获取win用户hash密码
1.导出lsass.exe procdump64.exe -accepteula -ma lsass.exe lsass.dmp 2.执行mimikatz mimikatz.exe "sek ...
- 机器学习：weka中添加自己的分类和聚类算法
不管是实验室研究机器学习算法或是公司研发,都有需要自己改进算法的时候,下面就说说怎么在weka里增加改进的机器学习算法. 一 添加分类算法的流程 1 编写的分类器必须继承 Classifier或是Cl ...
- 【Labview入门】子VI的调用
labview版本:Labview2015 Labview里面也可以向C语言等变成语言一样调用子程序,本文带你一步一步实现子VI的创建与调用. 第一步 写好程序 首先我们写个简单的加法程序: 我们的目 ...
- 【OUC2019写作】论文写作第九小组英语常用表达整理
第一部分: 一.简要综述以往和现在研究: 某方法被认为如何如何:it is well known that; it is regarded as; it is believed to ; It is ...