css怎么实现点击切换图片

html-css012

css怎么实现点击切换图片,第1张

<div class="gyyy">

<img src="关于医院.jpg">

<span>关于医院</span>

</div>

$(function(){

var imgs=document.getElementsByName("img")

$(".gyyy").click(function(){

imgs.src="新图片的路径";

$(".gyyy>span").css("color","blue")

})

})

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

.list { width: 500px margin: 0 auto display: flex }

.list > .item { flex: 1 margin: 10px position: relative text-align: center }

.list > .item input { opacity: 0 position: absolute left: 0 top: 0 right: 0 bottom: 0 width: 100% height: 100% z-index: 2 }

.list > .item input ~ .text { border: 1px solid #eee padding: 10px position: relative }

.list > .item input:checked ~ .text { border-color: red color: red }

</style>

</head>

<body>

<div class="list">

<div class="item">

<input type="radio" name="list" value="1" />

<div class="text">选项1</div>

</div>

<div class="item">

<input type="radio" name="list" value="2" />

<div class="text">选项2</div>

</div>

<div class="item">

<input type="radio" name="list" value="3" />

<div class="text">选项3</div>

</div>

<div class="item">

<input type="radio" name="list" value="4" />

<div class="text">选项4</div>

</div>

</div>

</body>

</html>

CSS3 element1~element2 选择器

CSS3 :checked 选择器

点击事件只能设置在html元素中,所以background是没有办法设置点击的。但是,它的元素div是有点击事件onclick的。如果div设置onclick无效,建议使用jquery来绑定div的click事件。

此外,由于div中还有其它元素有click事件,所以,这就涉及到了事件冒泡的问题。

那么,说到这,指出你的一个代码问题。网页中,html元素的id必须是唯一的。如果id不唯一,一代涉及id,程序可能会出错。而class才是可以重复的。

可以如下纠正:

<input type="submit" name="button" id="btn_searc" value=" " class="button">

<input type="button" name="button" id="btn_ask" value=" " class="button" >

下面就是解决事件冒泡问题了,还是建议jquery来解决

对于div的内层元素,我们使用jquery来绑定它的单击事件,并且静止响应div的单击事件

$('#btn_searc').blind('click',function(event){

searchPost() //这里响应id为btn_searc元素的单击事件

event.stopPropagation() //这局话就是停止事件冒泡了,也就是说,接下来的div的单击事件将不再会被响应。

})

同理,另外一个原色的单击事件可以如下

$('#btn_ask').blind('click',function(event){

ask()

event.stopPropagation()

})

那么,接下来就是去绑定div的单击事件,首先,还是将div的class改成id,并保证其唯一性。同时,css也要改成id的选择器:

#communion_header{

height: 88px

width: 690px

margin: 0 auto

background: url(../../images/communicate/communtion_logo.png) no-repeat 50px 30px

padding: 40px 0 0 270px

}

jquery绑定click

$('#communion_header').click(function(){

//这里写div的单击代码。可以使用JavaScript,更可以使用其进阶语言jQuery

})

最后,需要说明的是,代码使用的是JavaScript语言的一种进阶语言jQuery。它的使用要借助于jQuery库的存在。所以你必须去下载个jquery.js,并且在网页中添加关联。