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 ...
随机推荐
- Selenium学习之==>Selenium介绍
前世 Selenium RC 早期的Selenium使用的是JavaScript注入技术与浏览器打交道,需要Selenium RC启动一个Server,将操作Web元素的API调用转化为一段段Java ...
- unity shader 热扭曲 (屏幕后处理)
效果: c# using System; using System.Collections; using System.Collections.Generic; using UnityEngine ...
- LeetCode.867-转置矩阵(Transpose Matrix)
这是悦乐书的第332次更新,第356篇原创 01看题和准备 今天介绍的是LeetCode算法题中Easy级别的第202题(顺位题号是867).给定矩阵A,返回A的转置. 矩阵的转置是在其主对角线上翻转 ...
- 配置idea中类头注释中的 ${user} 自动获取电脑的名字,怎么去修改名字
在idea安装路径下找到 idea\IntelliJ IDEA 2018.3.2\bin下面有一个文件叫:idea64.exe.vmoptions 编辑此文件就能修改主时钟自动获取的名称: 例如:添加 ...
- Spoj 2798 Qtree3
一棵结点为黑色或白色的树,初始都是白色的.有两种操作 1 将一个结点换颜色 2 询问从根到结点u路径上面的第一个黑色点,没有则输出-1 InputIn the first line there are ...
- 关于BeautifulSoup4 解析器的说明
一.解析器概述 如同前几章笔记,当我们输入: soup=BeautifulSoup(response.body) 对网页进行析取时,并未规定解析器,此时使用的是python内部默认的解析器“html. ...
- python基础--函数1
# 一,为什么使用函数 # 1,可以使代码的组织结构清晰,可读性好 # 2,遇到重复的问题可以直接调用函数 # 3,功能扩展时,可直接修改,而无需每处都进行修改. # 二,函数为何物 # 函数对程序员 ...
- 从零构建vue项目(三)--vue常用插件
一.直接拉取的模板中,package.json如下: { "name": "vuecli2-test", "version": " ...
- Element-ui 使用详细介绍
一.后台搭建 使用 vue-admin-template 来快速搭建后台管理,它包含了 Element UI & axios & iconfont & permission c ...
- Y7000 安装ubuntu16.04.6 的tips :禁用nouveau 、Wifi 问题 、nvidia 驱动安装
由于最近要跑DeepLearning 所以在自己的Y7000上装一个Ubuntu ,自己碰了好多壁 写下来以防止自己忘掉以便后续再用! 配置:i7-8750H +GeForce GTX 1050Ti ...