标签：ott com 颜色 fun 清除 mic rem -- 图片
制作一个选项卡切换
1、把选项卡的html页面框架搭建起来
html页面代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <!--居中的框架开始--> <div class="tab-jz"> <!--选项卡开始--> <div class="tab-x" id="name"> <div class="tab-dj1"> <p> <a href="#">选项1</a> </p> </div> <div class="tab-dj2"> <p> <a href="#">选项2</a> </p> </div> <div class="tab-dj3 active"> <p> <a href="#">选项3</a> </p> </div> <div class="tab-dj4"> <p> <a href="#">选项4</a> </p> </div> </div> <!--选项卡结束--> <!--显示的内容开始--> <div id="nr"> <div> <p>显示的内容1</p> </div> <div> <p>显示的内容2</p> </div> <div style="display: block;"> <p>显示的内容3</p> </div> <div> <p>显示的内容4</p> </div> </div> <!--显示的内容结束--> </div> <!--居中的框架结束--> </div> <link rel="stylesheet" href="css/tab.css" /> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript" src="js/tab.js"></script> </body> </html>
2、给html页面添加css样式
css页面代码
/*清除所有a标签的下划线以及添加黑色字体颜色*/ a { text-decoration: none; color: black; } /*居中的主体*/ .tab-jz { width: 50%; height: 200px; margin: 0 auto; border: 1px solid silver; } /*选项卡的框架样式*/ .tab-x { width: 100%; height: 50px; display: flex; } /*把选项卡分成四份*/ .tab-dj1 { flex: 1; background-color: #C0C0C0; border-right: 1px solid #9D9D9D; border-bottom: 1px solid silver; } .tab-dj2 { flex: 1; background-color: #C0C0C0; border-right: 1px solid #9D9D9D; border-bottom: 1px solid silver; } .tab-dj3 { flex: 1; background-color: #C0C0C0; border-right: 1px solid #9D9D9D; border-bottom: 1px solid silver; } .tab-dj4 { flex: 1; background-color: #C0C0C0; border-bottom: 1px solid silver; } /*字体居中*/ p { text-align: center; } /*把所有内容隐藏*/ #nr div { display: none; } /*改变选项卡的背景色*/ .active { background-color: white; }
3、编写js让选项卡随意切换
js页面代码
$(function() { //获取id为name下的所有div var xx = document.getElementById("name").getElementsByTagName("div"); //获取id为nr下的所有div var nr = document.getElementById("nr").getElementsByTagName("div"); //遍历xx下的所有div for(var i = 0; i < xx.length; i++) { //为xx下的每个div添加index属性 xx[i].index = i; //当你点击第i个选项卡时执行 xx[i].onclick = function() { //再次遍历xx下的所有div for(var i = 0; i < xx.length; i++) { //当点击选项卡后根据下标移除选项卡的active类名（把选项卡的背景色清除） xx[i].classList.remove("active"); //当点击选项卡后根据下标把显示的内容，用内部样式方式隐藏 nr[i].style.display = "none"; } //当点击选项卡后为这个选项卡添加active类名（添加选项卡的背景色） this.classList.add("active"); //当点击选项卡后把这个下标隐藏的内容，用内部样式方式显示 nr[this.index].style.display = "block"; } } });
4、效果图
标签：ott com 颜色 fun 清除 mic rem -- 图片
原文地址：https://www.cnblogs.com/hyhs/p/12178803.html
