用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="布尔值",通过布尔值的真假来决定,某元素是否显 ...
随机推荐
- Activity初学乍练
1.Activity的概念与Activity的生命周期图: 注意事项: onPause()和onStop()被调用的前提是: 打开了一个新的Activity!而前者是旧Activity还可见的状态:后 ...
- Redis持久化的方式有哪些？优缺点分别是什么？
Redis持久化方式 持久化的目的主要是做灾难恢复,数据恢复.由于Redis的数据全都放在内存里面,如果Redis挂了,没有配置持久化的话,重启的时候数据会全部丢失. 突 ...
- CSS实现带箭头的提示框
我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...
- Tomcat8 结构原理解析
Tomcat是JavaWeb组件架构中一款apache开源的服务器软件,通过对其的学习,总结并且分享了关于它的知识,下边是分享ppt内容,希望对想了解tomcat人有帮助. Tomcat历史 1999 ...
- python基本数据类型及常用功能
1.数字类型 int -int(将字符串转换为数字) a = " print(type(a),a) b = int(a) print(type(b),b) num = " v = ...
- PowerUp攻击模块实战
PowerUp攻击模块实战 1.将PowerUp.ps1脚本上传至目标服务器,然后在本地执行 2.使用IEX在内存中加载此脚本,执行以下命令,脚本将进行所有的检查. powershell.exe ...
- PHP 插入排序 -- 折半查找
1. 折半查找 -- Binary Insertion Sort 时间复杂度 : O(n^2) 适用条件 : 相对直接插入排序,减少了数值的比较次数.适用于需要排序的数码比较少的情况. <?p ...
- [USACO09JAN]安全出行Safe Travel 最短路，并查集
题目描述 Gremlins have infested the farm. These nasty, ugly fairy-like creatures thwart the cows as each ...
- [BZOJ1833][ZJOI2010]数字计数
Description 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. Input 输入文件中仅包含一行两个整数a.b,含义如上所述. Output 输出文 ...
- Python开发【第一篇】:目录
本系列博文包含Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习Python编程的朋友们提供一点帮助! .Python开发[第一篇]:目录 .Python开发[第二篇]:初始P ...