HTML选项卡制作

当点击标着不同选项的按钮时，会出现相应选项的内容，这是我们要实现的选项卡功能。

方法1：HTML+CSS+JS实现

首先，如图1.1在页面放上几个按钮，并且加上对应想要展示的div（例子中为4个选项）。
图1.1 设置按钮

依次给4个div背景选为不同颜色，并且设置一下样式，能看到图1.2所示结果。

图1.2 按钮样式

用js实现的思路很简单：比如可以先让其他div隐藏，点击第n个按钮的时候再让第n个div出现，且让该按钮样式变成已选中的样子，并默认第一个按钮先按下显示第一个div ，具体步骤如下所示。

1.先让所有div都隐藏，给第一个div单独设置display : block（见图1.3&1.4）。

图1.3 在css中设置div都隐藏

图1.4 使第一个div显现

2.给第一个按钮设置class=“checked”，代表已选中（图1.5&1.6）。

图1.5 让第一个按钮显示已选中

图1.6 设置已选中的样式

通过图1.7可以看到选中按钮和其他按钮的区别。

图1.7 区别展示图

3.接下来开始写javascript，获取需要用到的元素（图1.8）。

图1.8 js中获取元素

然后添加一个for循环（如图1.9，图带有代码注解）,效果就可以实现了！

图1.9 for循环

效果就可以实现了！

方法2：HTML+CSS实现

纯css实现选项卡功能的方法也不止一种，这里用radio（单选按钮）来实现（图2.1）。

图2.1 css——radio程序

与上一个方法中元素类似，并且也让div先隐藏。

（注：由于radio样式基本不能改，所以可以用与它绑定，再设置radio不可见，让可更改样式的label来替代它，即点击某个label与此绑定的radio也会被选中。）

可以看到，radio自带checked属性。css中可以这样写（图2.2）：

图2.2 check属性程序编写

它的意思是：当id为"r1"的radio被选中(:checked)时，让同级下第1个div显示出来（display: block;）。照着这个模板写4个，让每个radio控制相应的div显示（图2.3）。

图2.3 4个check属性程序编写

除此之外，用这种方法也可以设置被选中label的“已选中”样式，最后将radio、label选中样式程序合并一下（图2.4）。

图2.4 程序图

这样就实现了单纯依靠css制作HTML选项卡！

选项卡可以拓展应用在很多地方，比如简易的轮播图和导航栏。这样的效果还可以通过其他方法实现，比如用H5新特性实现tab选项卡切换等等。
感谢阅读！

HTML选项卡制作相关推荐

axure没有团队页签_Axure教程：多页签可滚动的选项卡制作
这就是我下面要分享给大家的内容啦: 首先为大家回顾传统选项卡的制作过程,再展示可滚动页签的选项卡制作过程. 一.最常见的传统选项卡最常见的选项卡,一般有三四个页签,分别对应各自页面,通过鼠标点击页签 ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...
axure没有团队页签_Axure教程：多页签可滚动的选项卡制作（附源文件下载）
选项卡,就是用多个页签来切换展示不同的功能页面,通过点击相应页签来切换相应选项卡页面的效果,相信大家在绘制原型中常常会遇到,并不陌生.但是如何优化选项卡的展示效果?以及如果选项卡过多,如何做到像真正系 ...
JQuery 网页选项卡制作
网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. 引入所需库选项卡原理业务核心完整小例子引 ...
四十七、使用bootstrap中的选项卡制作产品特色页面
一.bootstrap参考链接参考链接:https://v3.bootcss.com/javascript/#tabs 参考链接:https://v3.bootcss.com/components/ ...
使用css+js制作选项卡
选项卡制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
js学习--制作选项卡
选项卡制作 /** 通过改变按钮的类名,然后改变它的颜色,this是代指当前事件,可以通过在js中添加标签来确定div的名字,通过点击事件来改变它的状态*/ <style>.active ...
html tab选项卡控件,tab选项卡插件
这是一款使用十分方便的.为移动设备定制的.可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件.在你要显示很多不同的内容时,tab选项卡导航方式是十分有用的.常见的方式是在同一个 ...
springboot web项目_Vue、Spring Boot开发小而完整的Web前后端分离项目实战12
第12讲 tabs选项卡制作讲解 1.1.tabs选项卡组件: 1. tabs 组件 2.常用属性: value :选中选项卡的name type :选项卡风格可选择 card / border-c ...

HTML选项卡制作

HTML选项卡制作相关推荐

最新文章

热门文章

​HTML选项卡制作

​HTML选项卡制作相关推荐

最新文章

热门文章

HTML选项卡制作

HTML选项卡制作相关推荐