点击文字,切换div

2024-08-09

jquery效果，多个div，点击任何一个div，那么这个div会切换文字，变换背景颜色，再次点击其他的div ,这个div会发生刚才的变化，之前点击的div的颜色会变回来

首先css样式: /*原来的背景色*/ .bg { background:'red' } /*需要切换的背景色*/ .bg_click { background:'green' } JS: $('div').on('click',function(){ var $div = $(this); var $others = $div.siblings(); if($div.hasClass('bg')){ $div.removeClass('bg').addClass('bg_click').htm

点击文字弹出一个DIV层窗口代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height:

jQuery点击缩略图切换大图代码

很多网站上都会有点击缩略图切换成大图的效果,下面来分享一下它的源码还是先来看效果截图运行文件然后点击下一张下面分享源代码 html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xht

Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态

前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5个(修改位置在zTreeStyle.css里面哦,在外面设置不上的,页面也获取不到想要设置样式的节点...如果你能还望赐教)代码如下: .ztree>li>ul>li>ul>li>ul{overflow:hidden;} .ztree>li>ul>li&g

JQuery实现点击按钮切换图片(附源码)--JQuery基础

JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JQuery实现点击按钮切换图片</title> <style type="text/css"> *{ margin:0;

基于jQuery图片遮罩滑动文字切换特效

基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="bodyCon07"> <div class="teacher"> <div class="teacherPic"> <div class="content"> <i

jquery 实现点击颜色切换

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, in

IE botton 点击文字下沉

IE点击文字下沉这个应该是浏览器自带的,只要是用button标签应该都是避免不了的. 如果实在接受不了的话,用一个元素比如div.p等块级元素或者是i.b.s.u.span等行内元素.用样式去模拟button的效果. 当然想用图片也是可以的.这样就可以避免点击的时候文字下沉.

点击其它地方DIV隐藏

$(document).bind('click',function(e){ var e = e || window.event; //浏览器兼容性 var elem = e.target || e.srcElement; while (elem) { //循环判断至跟节点,防止点击的是div子元素 if (elem.id && elem.id=='countrySlt' || elem.id && elem.id=='countryInput') { return; } e

ztree点击文字勾选checkbox，radio实现方法

ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztree节点的文字就能勾选此节点,添加onClick事件,然后调用checkNode方法勾选. ztree点击文字勾选checkbox,radio源代码如下,示例居于zTree_v3\demo\cn\excheck\checkbox.html修改,自己可以增加setting中的callback,onCli

文字以及div水平垂直居中

文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div></div> 文字居中水平居中text-align: center; .mydiv{ text-align: center;} 垂直居中 vertical-align: middle; .mydiv{ height:400px; text-align: center; vertical-align:

点击文字可以选中相应的checkbox

<html><head><title>中国站长天空-网页特效-表单特效-点击文字选中的复选框</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"></head><body><form>

文字适应DIV

今天突然碰到了一个奇怪的问题那就是对于纯数字和英文字母文字多了会超出div 且即使是设置了height:auto overflow-y:auto 也不管用只是在x轴上出现滚动条不论用什么高度自适应高度都是无法自己改变的呢... check this http://stackoverflow.com/questions/2920114/how-to-auto-adjust-the-div-height-according-to-content-in-it 解决方法是实

用CSS让文字居于div的底部

css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&q

文字在div中水平和垂直居中的的css样式

文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px solid green; /*边框*/ text-align: center; /*文字水平居中对齐*/ line-height:

Jquery点击除了指定div元素其他地方，隐藏该div

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.min.js"></script> <title></title> <script type="text/javascript"&

php实现点击文字提交表单并传递数据至下一个页面

<?php $id="4";//等会要把这个数据传到第二个页面 ?> <?php echo "<li>"; echo "<form name=\"myquestion\" method=\"post\" action=\"question.php\">"; echo "<input name=\"questionID\&

css 如何使图片与文字在div中居中展示？

1.情景展示如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1px solid red;"> <img src="C:\Users\Marydon\Desktop\head_no.jpg" style="border-radius: 60px;width: 80px;"/> <span style=

未知行数的文字在div中垂直居中

今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,html代码如下:(经测试,除了IE7,其他浏览器都成功的垂直居中了) <div class="m"><div class="m1"><div class="m2">南京证券股份业部份业部</div><

定时器应用-点击按钮，div向右移动

需求是点击button,div就一直往右移动,给个条件left=800px就停止移动,通过定时器来控制. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width:

点击文字,切换div

热门专题