<!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. TF模型训练中注意Loss和F1的变化情况

    之前训练模型,认为网络图构建完成,Loss肯定是呈现下降的,就没有太留心,知识关注F1的变化情况,找到最优的F1训练就停止了,认为模型就ok. 但实际中发现,我们要时刻关注网络的损失变化情况,batc ...

  2. hdu6363 bookshelf 容斥+数列+数论gcd定理（也可以Möbius）

    #define _CRT_SECURE_NO_WARNINGS #include<cmath> #include<iostream> #include<stdio.h&g ...

  3. vue 错误分析

    1  点击事件发生的错误 原因是,重复触发事件函数导致   改为不一样的名字即可 2  提示 : “ vuex] Expects string as the type, but found undef ...

  4. jdbc实现分页，需要前端传当前页码

    1.封装一个公共实体类用于返回:实体数据,当前页,总页数,总条数,每页多少条 public class PageInfo<T> { //一页显示的记录数 private int numPe ...

  5. [daily][qemu][libvirt] 使用libvirt管理qemu

    别人创建的虚拟机.用libvirt做的配置. 我一直是手写qemu脚本的,不会用virtsh,所以,学一下. ------------------ 先来个arch的文档: https://wiki.a ...

  6. nohup 和 &

    &的意思是在后台运行, 什么意思呢?  意思是说, 当你在执行 ./a.out & 的时候, 即使你用ctrl C,  那么a.out照样运行(因为对SIGINT信号免疫). 但是要注 ...

  7. 图->连通性->有向图的强连通分量

    文字描述 有向图强连通分量的定义:在有向图G中,如果两个顶点vi,vj间(vi>vj)有一条从vi到vj的有向路径,同时还有一条从vj到vi的有向路径,则称两个顶点强连通(strongly co ...

  8. 实验一：Java开发环境的熟悉

    实验一:Java开发环境的熟悉 一.实验一-1 在码云中建立"20165317exp1"的项目. 从git中下载该项目. 在"20165317exp1"目录下建 ...

  9. 《Linux 文本处理》- awk 分析 nginx 日志

    废话不多说,简单了解一下 awk - 强大的文本分析工具,也就是分析日志 最常用的就是分析日志了吧,做统计什么,这里也拿 nginx 日志来做分析 1:统计出现次数 - 比如状态码出现次数 - 先直接 ...

  10. 前端路由实现（history）

    HTML5 history 新增了两个 API:history.pushState 和 history.replaceState 两个 API 都接收三个参数: 1.状态对象(state object ...