纯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方法 ...
随机推荐
- tensorflow模型在实际上线进行预测的时候，使用CPU工作
最近已经训练好了一版基于DeepLearning的文本分类模型,TextCNN原理.在实际的预测中,如果默认模型会优先选择GPU那么每一次实例调用,都会加载GPU信息,这会造成很大的性能降低. 那么, ...
- AudioUnit录音和播放同时进行的一些注意点
录音(播放)和暂停 -(void)start { self.soundTotalLength = 0.0f; if (!self.unitHaveStart) { NSError *error = n ...
- centos7安装Apache
1.下载安装包wget http://mirrors.hust.edu.cn/apache/httpd/httpd-2.4.37.tar.gz 2.解压tar zxvf httpd-2.4.37.ta ...
- php之运算符
运算符优先级相同,运算符的结合方向决定了该如何运算, 一.运算符优先级 组合方向 运算符 附加信息 无 clone new clone和new 左 [ array 右 ** 算术运算符 右 ++ -- ...
- 理解Python的双下划线命名（转）
add by zhj:今天在学习SimpleHTTPServer的源代码时,看到了Python标准库SocketServer模块中有个BaseServer类,该类的__init__方法定义如下 def ...
- myeclipse项目导入到eclipse， HttpServletRequest报红现象
eclipse项目中关于导入的项目里提示HttpServletRequest 不能引用的解决办法 当使用eclipse导入外部的web工程时,有时会提示HttpServletRequest, Serv ...
- java应用零停机，时间索引重建（reindex）
一个field的设置是不能被修改的,如果要修改一个Field,那么应该重新按照新的mapping,建立一个index,然后将数据批量查询出来,重新用bulk api写入index中 批量查询的时候,建 ...
- 前端 HTML 常用标签 head标签相关内容 script标签
script标签 定义JavaScript代码 <!--定义JavaScript代码--> <script type="text/javascript"> ...
- Wi-Fi 协议和数率?
IEEE 802.11Wi-Fi 协议摘要 协议 频率 信号 最大数据速率 传统 802.11 2.4GHz FHSS 或 DSSS 2Mbps 802.11A 5GHz OFDM 54Mbps 80 ...
- 递归与非递归打印乘法口诀表--Scala（指令式、函数式思维练习）
object Test extends App { def printMultiTable() { var i = 1 while (i < 10) { var j = 1 while (j & ...