用纯CSS3代码实现的tab标签切换_target选择器切换文字-程序员宅基地

技术标签: css  笔记  # CSS  html  

通过点击不同的标签选项来显示相应的内容。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
主要用到CSS的:target选择器
https://www.w3school.com.cn/cssref/selector_target.asp

更详细的可见https://www.cnblogs.com/bgwhite/p/9414282.html
ps:打开后有背景音乐。

z-index属性:https://www.runoob.com/cssref/pr-pos-z-index.html
源码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用纯CSS3代码实现的tab标签切换</title>

<style>
	#tab{
     width:310px;
		 height:200px;
		 border:1px solid;
		 position:absolute;	
		 top:100px;
		 left:100px;
		 }
	ul{
     list-style:none;padding:0px;margin:0px;}
	ul li{
     float:left;width:33.3%;}
	ul li a{
     background:#dbc;/*藕粉色*/
			height:30px;
			line-height:30px;
			display:block;
			text-decoration:none;/*去除下划线*/
			text-align:center;/*文字水平居中*/
			border-right:1px solid #eee;/*右边框,浅浅灰*/
	}
	#tab>div{
     border-bottom:1px solid;
			 width:100%;
			 height:170px;
			 position:absolute;
			 top:31px;
			 background:#fff;
			 text-indent:2em;/*首行缩进*/
			}
	#div1:target,#div2:target,#div3:target{
     z-index:1;}/*z-index 属性指定一个元素的堆叠顺序*/
</style>

</head>
<body>
	<div id=tab>
		<ul>
			<li><a href="#div1">标签1</a></li>
			<li><a href="#div2">标签2</a></li>
			<li><a href="#div3">标签3</a></li>
		</ul>
			<div id=div1>这是标签1的内容:白盒测试和黑盒测试的区别</div>
			<div id=div2>这是标签2的内容:白盒测试是通过程序的源代码进行测试而不使用用户界面。这种类型的测试需要从代码句法发现内部代码在算法、溢出、路径、条件等中的缺点或错误,进而加以修正。</div>
			<div id=div3>这是标签3的内容:黑盒测试是通过使用整个软件或某种软件功能来严格进行测试,而并不检查程序的源代码,也不很清楚地了解该软件的源码程序是怎么样设计的。</div>
	</div>
</body>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44286392/article/details/107796275

智能推荐

Mysql中锁的类型有哪些?_mysql锁的分类-程序员宅基地

文章浏览阅读3.5k次,点赞2次,收藏21次。粒度大、加锁简单、容易冲突粒度小,加锁比表锁困难,不易冲突,支持更高的并发粒度更小,加锁更困难,不易冲突,支持更高的并发。当加了这样一个状态,就相当于,告诉其他事务,我已经对整个表进行了共享锁会这我排他锁。避免了对整个索引的每个节点扫描是否加锁,而这个状态就是意向锁。如有错误欢迎指正..._mysql锁的分类

Java使用多线程,模拟龟兔赛跑的场景_java多线程编程实现龟兔赛跑的演示demo-程序员宅基地

文章浏览阅读6.1k次,点赞8次,收藏34次。1:项目结构2:代码package tianyi.demo1;public class demo1 { private int toristDistance;//乌龟跑过的距离 private int rabbitDistance;//兔子跑过的距离 /** * 乌龟线程内部类 */ class Torist extends..._java多线程编程实现龟兔赛跑的演示demo

c语言红外解码程序,C语言写的红外遥控解码程序-程序员宅基地

文章浏览阅读206次。#include "STC89C51RC.H"sbit DQ = P4^3;sbit SPK = P1^0;#include absacc.h>#define seg1 XBYTE[0xffec]#define seg2 XBYTE[0xffed]#define seg3 XBYTE[0xffee]#define seg4 XBYTE[0xffef]unsigned char IRMcode..._22.1184 红外码

关于linphone apk的通话设置_linephone apk-程序员宅基地

文章浏览阅读1.9k次。点击sip 登陆 登陆 后 一般的服务器(比如freeswitch)对avpf都不支持需要点击账号取消勾选 音频、视频的编码设置可根据实际运用设置 设置完成后可进行通话 如果没声音 先查看有没收到rtp转发 则到网络链接 配置ice+turn测试 设置如下 然后在登陆账号设置该turn设置完成在进行测试 如还有问题可进群群261074724..._linephone apk

[转]简单的说x86代表32位操作系统x64代表64位操作系统_00:07代表64-bit x86引导-程序员宅基地

文章浏览阅读1k次。x86是对基于intel处理器的系统的标准缩写。X与处理器没有任何关系,它是一个对所有*86系统的简单的通配符定义,是一个intel通用计算机系列的编号,也标识一套通用的计算机指令集合,由于早期intel的CPU编号都是如8086,80286来编号,由于这整个系列的CPU都是指令兼容的,所以都用X86来标识所使用的指令集合如今的奔腾,赛扬系列都是支持X86指令系统的,所以都属于X86家族.这里的6_00:07代表64-bit x86引导

android 7 ninja 关闭,编译安卓7.0源码出现make: *** [ninja_wrapper] Error 1【转】-程序员宅基地

文章浏览阅读572次。32 warnings generated.ninja: build stopped: subcommand failed.build/core/ninja.mk:148: recipe for target 'ninja_wrapper' failedmake: *** [ninja_wrapper] Error 11,在jack-admin 中加入了 -Xmx8192m修改prebuilts/..._make: *** [out/build-hi3798mv200.ninja] 错误 1

随便推点

使用datasets库加载glue数据集时load_dataset发生Connection Error问题解决方法_加载已经下载好的glue数据-程序员宅基地

文章浏览阅读2.4k次。在复现相关论文时,使用dataset.load_data('glue',self.task_name)时程序报错Connection Error(104,....解决方法:pip install datasets==1.9.0更新datasets库版本到最新版本,另加多运行几次程序;一般如果第一次运行报错,排除网络因素外,基本上继续运行第二次就能运行成功..._加载已经下载好的glue数据

caffe 安装 window/linux vs2015 py2 和py3_conda create --name caffe python=3.5-程序员宅基地

文章浏览阅读131次。caffe 安装 window/linux vs2015 py2 和py3一、window 安装刚刚开始学习caffe,之前没有使用cmake,vs等工具的经验的,就caffe的安装花了将来两天的时间,看了网上各种版本的安装攻略,不知道什么什么总是遇到博主没有遇到的问题,心累。根据各种教程安装了vs2017,vs2013,boost等各种软件(这几个软件安装都是按小时计算的 ) 而且把最终还没有成功,最接近成功的就是安装完成了一个python2.7版本的,可是我需要3.x版本的废话不说了,下面介绍我_conda create --name caffe python=3.5

【C#】List高级用法之Sort(), Find() , FindAll() ,Exists()实际应用_c# list.findall-程序员宅基地

文章浏览阅读7.4k次,点赞3次,收藏22次。public partial class Form1 : Form{ public Form1() { InitializeComponent(); } List&amp;lt;Person&amp;gt; person = new List&amp;lt;Person&amp;gt;(); private void Form1_Load(object sender,..._c# list.findall

DUILIB热键_duilib hotkey-程序员宅基地

文章浏览阅读1.9k次。#ifndef __UIHOTKEY_H__#define __UIHOTKEY_H__#pragma oncenamespace DuiLib{class CHotKeyUI;class UILIB_API CHotKeyWnd : public CWindowWnd{public:CHotKeyWnd(void);public_duilib hotkey

微服务电商系统从设计到实现全流程讲解_微服务电商系统流程分析-程序员宅基地

文章浏览阅读6.5k次。课程的背景大型电商网站架构是一个系列最新技术组合,如果有大型网站开发背景,很受公司关注。如果您目前从事电商或者想进入电商行业,在此课程根据实际需要,进行改造,扩展,支持千万PV,是没问题的。分布式大型网站,目前看主要有几类1.大型门户,比如网易,新浪等;2.SNS网站,比如校内,开心网等;3.电商网站:比如阿里巴巴,京东商城,国美在线,汽车之家等。大型门户一般是新闻类信息,可以使用CDN,静态..._微服务电商系统流程分析

POJO/DTO/DO/EO/VO/BO/PO/AO的含义和使用_dto vo eo-程序员宅基地

文章浏览阅读8k次,点赞7次,收藏27次。关于POJO/DTO/DO/EO/VO/BO/PO/AO本文讨论 POJO/DTO/DO/EO/VO/BO/PO/AO 的定义,另外讨论了这些xO在controller、service、dao/mapper层里的使用规范。另外还稍微讨论了controller中是否要 “轻逻辑”,mapper接口的规范等等问题。前言在我们的java项目中存在各种xO的概念,如POJO/DTO/DO/EO/VO..._dto vo eo