<!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. Java进阶面试题大集合-offer不再是问题

    Java基础 1.List 和 Set 的区别 2.HashSet 是如何保证不重复的 3.HashMap 是线程安全的吗,为什么不是线程安全的(最好画图说明多线程环境下不安全)? 4.HashMap ...

  2. Vue.js最佳实践

    Vue.js最佳实践 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ t ...

  3. OC变量限定符和属性限定符

    ARC当中变量的四种生命周期限定符 __strong __weak __unsafe_unretained __autoreleaseing __strong 是默认的限定符,无需显示引入,只要有强引 ...

  4. [性能优化] perf

    运行时性能分析工具 wiki:https://en.wikipedia.org/wiki/Perf_(Linux) linux wiki:https://perf.wiki.kernel.org/in ...

  5. [dev][https] 非PFS协商的https的流量的解码

    经过基础调研之后,目前准备确认实现方案,完成对https的解码. 之前的调研,传送门: http://www.cnblogs.com/hugetong/p/6670083.html 1. 需求: 以旁 ...

  6. PLSQL复合触发器

    复合触发器范例 create or replace trigger compound_trigger for insert or update or delete on dept_x compound ...

  7. 【PyQt5-Qt Designer】工具箱(QToolBox)控件的使用

    工具箱(QToolBox)+toolButton+tabWidget 总体介绍 QToolBox类提供了一列选项卡的小部件(选项卡内含项目). 工具箱是一个小部件,它将选项卡一个一个的显示,当前项目显 ...

  8. HBase系列文章（转）

    HBase概念学习(一)基本架构 HBase概念学习(二)JAVA API操作概览 HBase概念学习(三)Java API之CRUD(增查改删) HBase概念学习(四)Java API之扫描和过滤 ...

  9. 经典影响力传播模型LT模型、IC模型

    一.LT模型:线性阈值模型 思想:当一个已经激活的节点去试图激活邻居节点而没有成功时,其对邻居节点的影响力被累积而不是被舍弃,这个贡献直到节点被激活或传播过程结束为止.该过程称为‘影响累积’. 过程: ...

  10. ASCLL码中的一些小知识

    其次要记住asill值中   65是A      97是a A与a之间相隔32,用int转换后再用char转换回来. char b = s.charAt(i);为字符串转换成一个一个的.