jquery +点击按钮,切换div内容,按钮加高亮
html:
<div class="dw4">
<span class="dw">单位(次)</span>
<div class="time4">
<div class="dat day active4">a</div>
<div class="dat month">b</div>
</div>
</div>
<div class="tabinners4">
<div class="inner4">
我是第一个内容哦
</div>
<div class="inner4">
我是第二个内容呀
</div>
</div>
css:
.dw4{
position: relative;
}
.time4{
position: absolute;
right:6px;
top:2px;
}
.time4 .dat{
width: 55px;
height: 20px;
display: inline-block;
/* float: right; */
color: #fff;
font-size: 12px;
background: url(../image/l4.png) no-repeat;
padding-left: 11px;
padding-top: 1px;
cursor: pointer;
}
.dw4 .active4{
background: url(../image/h4.png) no-repeat;
cursor: pointer;
width: 55px;
}
.tabinners4 .inner4:first-child{
display: block;
}
.inner4{
width: 370px;
height: 209px;
background: url(../image/kuang4aa.png) no-repeat;
position: relative;
display: none;
margin-top: 12px;
}
js:
$(".time4 .dat").click(function(){
$(this).addClass('active4').siblings().removeClass('active4');
var index=$(this).index();
$(".tabinners4 .inner4").eq(index).show().siblings().hide();
})
jquery +点击按钮,切换div内容,按钮加高亮的更多相关文章
- jQuery点击缩略图切换大图代码
很多网站上都会有点击缩略图切换成大图的效果,下面来分享一下它的源码 还是先来看效果截图 运行文件 然后点击下一张 下面分享源代码 html文件 <!DOCTYPE html PUBLIC &qu ...
- Jquery点击除了指定div元素其他地方,隐藏该div
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...
- 锋利的Jquery(点击显示隐藏div)
点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 点击弹出div内容包括遮罩层
效果: HTML: <!-- 添加分组按钮 --> <div class="group_add" onclick = "docu ...
- JQuery点击标题实现div的收缩
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jquery点击来回切换
做个笔记偶尔用有时记不住 方法一: <div id="test"> test </div> $('#test').mouseover(function () ...
- jquery 点击空白处隐藏div元素
<style type="text/css">.pop {display:none;width: 200px;height: 130px;background: #08 ...
- jquery 点击事件切换样式
$('#FatherName').on('click', '.ClassName', function(e){ $('.ClassName').removeClass('active'); $(thi ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
随机推荐
- laravel 5.6 使用RabbitMQ作为消息中间件
1.Composer安装laravel-queue-rabbitmqcomposer require vladimir-yuldashev/laravel-queue-rabbitmq2.在confi ...
- date picker with jquery
<html> <input id="from_time" name="from_time"type="text" valu ...
- LeetCode.876-链表的中间节点(Middle of the Linked List)
这是悦乐书的第337次更新,第361篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第206题(顺位题号是876).给定具有头节点的非空单链表,返回链表的中间节点.如果有两 ...
- DWIN串口屏的使用
学习需要,根据dwin的官方文档及网络资料整理而来. 一. 基础知识理解 1.1.变量地址和描述指针 VP(变量地址)和SP(描述指针)通常是指显示变量功能的两种定义,两者共用0000到6FFF地址 ...
- 【Linux开发】Linux V4L2驱动架构解析与开发导引
Linux V4L2驱动架构解析与开发导引 Andrew按:众所周知,linux中可以采用灵活的多层次的驱动架构来对接口进行统一与抽象,最低层次的驱动总是直接面向硬件的,而最高层次的驱动在linux中 ...
- 精读《What's new in javascript》
1. 引言 本周精读的内容是:Google I/O 19. 2019 年 Google I/O 介绍了一些激动人心的 JS 新特性,这些特性有些已经被主流浏览器实现,并支持 polyfill,有些还在 ...
- Jmeter 03 Jmeter断言之Json断言
json断言可以让我们很快的定位到响应数据中的某一字段,当然前提是响应数据是json格式的,所以如果响应数据为json格式的话,使用json断言还是相当方便的. 还是以之前的接口举例 Url: htt ...
- 【FAQ】P3. 为什么 torch.cuda.is_available() 是 False
为什么 torch.cuda.is_available() 是 False torch.cuda.is_available(),这个指令的作用是看,你电脑的 GPU 能否被 PyTorch 调用. 如 ...
- ThinkPHP5微信支付扩展库(超级简单, 超级超好用!)
ThinkPHP5微信支付最新扩展库(2017年9月24日). 我的想法很简单,就是只需要调用一个静态方法就可以完成支付,查询,退款,查账等等, 无需重复造轮子, 专注自己业务!欢迎到Github查看 ...
- vue项目1-pizza点餐系统6-路由精讲之复用router-view
1.在主组件展示二级路由的组件内容,在App.vue中添加 <br> <div class="container"> <!-- row 行排列 --& ...