纯HTML和CSS实现点击切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img {
display: none;
width: 100px;
height: 100px;
}
input:checked + img {
display: block;
}
input {
position: absolute;
left: -9999px;
}
label {
cursor: pointer;
}
</style>
</head>
<body>
<div id="cont">
<input id="img1" name="img" type="radio" checked="checked">
<img src="./img1.png" style="background: red">
<input id="img2" name="img" type="radio">
<img src="./img2.png" style="background: black">
</div>
<div id="nav">
<label for="img1">第一张</label>
<label for="img2">第二张</label>
</div>
</body>
</html>
纯HTML和CSS实现点击切换的更多相关文章
- 纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 纯css实现checkbox开关切换按钮
我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 【css】css实现点击Toggle功能/icon切换
①实现Toggle功能 html结构: <div class="cssTog"><label> <p> 专业:B020309现代企业管理(独立本 ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- jquery中点击切换的实现
项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法 ...
随机推荐
- iOS10原生的语音转文字功能
#import <Foundation/Foundation.h> #import <Speech/Speech.h> @interface SpeechListener : ...
- Runloop的再学习之浅析（一）
一,认识RunLoop 我的理解: 1. 在编程的世界里,万物皆对象.所以RunLoop 实际上也是一个对象,这个对象管理了其需要 处理的事件和消息,并提供了一个入口函数来执行上面 Event Loo ...
- PHP进阶-PHP执行和加速原理
- [development][security][modsecurity][nginx] nginx / modsecurity development things
接续前节:[security][modsecurity][nginx] nginx 与 modsecurity nginx开发手册:https://nginx.org/en/docs/dev/deve ...
- 查找->静态查找表->分块查找(索引顺序表)
文字描述 分块查找又称为索引顺序查找,是顺序查找的一种改进方法.在此查找算法中,除表本身外, 还需要建立一个”索引表”.索引表中包括两项内容:关键字项(其值为该字表内的最大关键字)和指针项(指示该子表 ...
- LeetCode 897 Increasing Order Search Tree 解题报告
题目要求 Given a tree, rearrange the tree in in-order so that the leftmost node in the tree is now the r ...
- ubuntu64位系统编译时头文件找不到的问题（可以查看g++ -v路径，设置export C_INCLUDE_PATH，CPLUS_INCLUDE_PATH）
今天编译webrtc时出现以下错误: ninja -C out/Debug Allninja: Entering directory `out/Debug'[1/6] CXX obj/talk/app ...
- 虚拟机VirtualBox与CentOS 7安装
一.VirtualBox 我们电脑的操作系统一般都是Windows,如果我们要学习Linux,那么可以在我们的电脑上装个虚拟机,然后在这虚拟机上安装Linux.虚拟机可以用VirtualBox 或者 ...
- zabbix宏（macro）使用：自定义监控阈值
一.简单应用场景 zabbix在监控cpu load时并没有考虑客户端cpu的个数和核心数量,当平均5分钟的负载达到5时zabbix执行报警动作,这样是非常不合理的,笔者的被监控机器有四核和单核,现在 ...
- es中对mapping的理解
(1)往es里面直接插入数据,es会自动建立索引,同时建立type以及对应的mapping (2)mapping中就自动定义了每个field的数据类型 (3)不同的数据类型(比如说text和date) ...