纯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方法 ...
随机推荐
- nginx伪静态之try_files和rewrite讲解
服务器脚本以php为例 一.伪静态是个啥? 1.说起伪静态基本上搞web开发的人,多多少少都有了解与使用,有人会说什么时候会使用伪静态?使用原生的url地址不是蛮好的吗,确实是这样的,其实 ...
- 转:jquery的$(function(){})和$(document).ready(function(){}) 的区别
原文链接:https://www.cnblogs.com/slyzly/articles/7809935.html [转载]jquery的$(function(){})和$(document).rea ...
- 内部排序->交换排序->快速排序
文字描述 快速排序是对起泡排序的一种改进.它的基本思想是,通过一趟排序将待排序记录分割成独立的两部分,其中一部分记录的关键字均比另一部分记录的关键字小,则可分别对这两部分记录继续进行排序,以达到整个 ...
- MVC编程模式
MVC编程模式 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式: Model(模型)表示应用程序核心(比如数据库记录列表) ...
- 如何监控 Java 垃圾回收机制: jps、jstack、jmap、jhat、jstat
一.MinorGC 一个新对象会被放到eden空间,当eden空间满了的时候,MinorGC就会执行,任何存活的对象,都从eden空间复制到to survivor空间,任何在from survivor ...
- 10.1-uC/OS-III任务堆栈空间
1.设置任务优先级 嵌入式系统中的重要的应用应该被设置为高优先级,一些显示操作就应该被设置为低优先级. 然而, 由于实时系统的复杂性, 在大多数情况下任务的优先级是不能被事先确定的.多数系统中,不是所 ...
- 理解Spark里的闭包
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/rlnLo2pNEfx9c/article/details/80650309 闭包的概念例如以下图: ...
- 自定义UIProgressView
自定义CustomporgressView #import <UIKit/UIKit.h> @interface CustomporgressView : UIView @property ...
- UIBezierPath使用
效果图,Demo的例子是我自己做的,下面曲线的代码是从别处copy过来的 copy地址 -(void)touchesBegan:(NSSet<UITouch *> *)touches wi ...
- DevExpress换肤
procedure TForm1.cxComboBox1PropertiesChange(Sender: TObject); begin // 这个地方必须是UserSkin,不然不会起作用 dxSk ...