<!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实现点击切换的更多相关文章

  1. 纯css就能实现可点击切换的轮播图，feel起来很丝滑

    前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...

  2. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

  3. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  4. 纯css实现checkbox开关切换按钮

    我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...

  5. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  6. 【css】css实现点击Toggle功能/icon切换

    ①实现Toggle功能 html结构: <div class="cssTog"><label> <p> 专业:B020309现代企业管理(独立本 ...

  7. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  8. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  9. jquery中点击切换的实现

    项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法 ...

随机推荐

  1. 深度学习中的batch的大小对学习效果的影响

    Batch_size参数的作用:决定了下降的方向 极端一: batch_size为全数据集(Full Batch Learning): 好处: 1.由全数据集确定的方向能够更好地代表样本总体,从而更准 ...

  2. WebStorm中配置node.js（Windows）

    WebStorm中配置node.js(Windows) 一.node 1.下载安装包 32 位 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi ...

  3. PostgreSQL源码安装文档

    This document describes the installation of PostgreSQL using the source    code distribution. (If yo ...

  4. iOS-静态库，动态库，framework，bundle浅析(四)

    1. 创建bundle,如图,点击 +  ,弹出选择框, macOS 下的Framework & Library  ,点击bundle,输入bundle的名字,然后点击 finish.   图 ...

  5. [daily][dpdk] 内核模块(网卡驱动)无法卸载

    由于程序的异常退出, 内核的引用计数没有被清除(我猜的). 所以驱动不能被卸载掉, 强制也不行. 如下: [root@localhost ~]# insmod /opt/scorpion/KingKo ...

  6. postgre

    切换用户:su postgres 启动:psql 查看有哪些数据库: \l 切换到数据库air: \c air 列出数据库中所有表: \d 列出指定表的所有字段信息: \d+ dag 或者 \d da ...

  7. kubernetes微服务部署

    1.哪些服务适合单独成为一个pod?哪些服务适合在一个pod中? message消息服务被很多服务调用   单独一个pod dubbo服务和web服务交互很高放在同一个pod里 API网关调用很多服务 ...

  8. vue项目使用vue-photo-preview插件实现点击图片放大预览和移动

    官方链接: http://npm.taobao.org/package/vue-photo-preview # 安装 npm install vue-photo-preview --save # 引入 ...

  9. Python字符串拼接的6种方法

    如有其他字符串拼接方法 欢迎留言提出哦 (示例版本为Py2) 1. 加号 第一种,有编程经验的人,估计都知道很多语言里面是用加号连接两个字符串,Python里面也是如此直接用 “+” 来连接两个字符串 ...

  10. atom 为什么启动terminal是总是打开是用户目录？

    atom 为什么启动terminal是总是打开是用户目录?如下图: 原因也很简单,只怪自己懒,没查单词surpress是什么意思: surpress directory argument,是抑制目录参 ...