纯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方法 ...
随机推荐
- 【每日一题】 UVA - 11809 Floating-Point Numbers 阅读题+取对数处理爆double
https://cn.vjudge.net/problem/UVA-11809 题意:很长orz 题解:算一下输入范围,发现用double是读不进来的,在这里wa了半天,(double 1e300 ...
- hive进行词频统计
统计文件信息: $ /opt/cdh-5.3.6/hadoop-2.5.0/bin/hdfs dfs -text /user/hadoop/wordcount/input/wc.input hadoo ...
- linux：nano 、cat和file
nano 在 Linux 下面编辑文件通常我们会直接使用专门的命令行编辑器比如(emacs,vim,nano),涉及 Linux 上的编辑器的内容比较多,且非常重要. nano 是 linux 的一款 ...
- 理解HTTP协议（转载）
一.HTTP协议的演进 HTTP(HyperText Transfer Protocol)协议是基于TCP的应用层协议,它不关心数据传输的细节,主要是用来规定客户端和服务端的数据传输格式,最初是用来向 ...
- SQL中Between查询日期时需要注意的地方
SQL中Between查询日期时需要注意的地方 某个表某个字段是Datetime型 以"YYYY-MM-DD 00:00:00" 存放 (1).例如数据 2009-01-22 ...
- RHEL6.2 ORACLE11G
今天翻文件看到这个系统的安装截图才发现自己没写,补上. 惯例还是用到的所有参数均位于文末附录 启动虚拟机进入系统安装 选择跳过硬盘检测 选择语言 选择基本存储设备 设定主机名 设定口令 选择使用所有空 ...
- 获取文件后缀名（zip,rar等）
var filename = file.name; var index1 = filename.lastIndexOf("."); var index2 = filename.le ...
- 为什么mysql 5.7.24启停不显示错误信息？log-error_verbosity参数
关键词:log-error_verbosity ,mysql启停没有信息,mysql启停不显示错误信息,mysql不显示启停信息 原因就是因为 log-error_verbosity = 2 被设置成 ...
- finecms5采集接口下载
哪里有finecms采集接口可以下载?我们在用finecms建站时比较纠结的是要如何采集文章,finecms商城是有售卖采集插件,价格是50元,有些朋友感觉比较贵,不太愿意买,我们也是比较权衡了才很久 ...
- 从Trie树（字典树）谈到后缀树
转:http://blog.csdn.net/v_july_v/article/details/6897097 引言 常关注本blog的读者朋友想必看过此篇文章:从B树.B+树.B*树谈到R 树,这次 ...