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 ...
随机推荐
- 中国MOOC_零基础学Java语言_第7周 函数_2完数
2 完数(5分) 题目内容: 一个正整数的因子是所有可以整除它的正整数.而一个数如果恰好等于除它本身外的因子之和,这个数就称为完数.例如6=1+2+3(6的因子是1,2,3). 现在,你要写一个程序, ...
- 操作系统 - Linux操作系统 - Centos - Centos6.5 - 安装|命令|使用汇总
快捷键 打开终端 右键 —>open terminal 网络配置 配置文件修改 - ONBOOT=no 修改为 ONBOOT=yes 工具 - gcc 安装 yum -y install gcc ...
- 【Linux开发】如何更改linux文件的拥有者及用户组(chown和chgrp)
本文整理自: http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.c ...
- Java内存管理和回收
转载自http://blog.csdn.net/cutesource/article/details/5906705 JVM内存组成结构 JVM栈由堆.栈.本地方法栈.方法区等部分组成,结构图如下所示 ...
- c++ 取整:四舍五入 向上取整 向下取整
对于数据的取整是经常需要考虑的 现在总结如下 #include<iostream> #include<cmath> using namespace std; int main( ...
- Vue Element使用第三库icon图标
一:引入单设图标 1.打开 阿里icon,注册 >登录>图标管理>我的项目 2.新建项目 返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一 ...
- 洛谷 P5663 加工零件 & [NOIP2019普及组] (奇偶最短路)
传送门 解题思路 很容易想到用最短路来解决这一道问题(题解法),因为两个点之间可以互相无限走,所以如果到某个点的最短路是x,那么x+2,x+4也一定能够达到. 但是如何保证这是正确的呢?比如说到某个点 ...
- c语言中字符串跨行书写的问题
字符串常量定义时的换行问题 如果我们在一行代码的行尾放置一个反斜杠,c语言编译器会忽略行尾的换行符,而把下一行的内容也算作是本行的内容.这里反斜杠起到了续行的作用. 如果我们不使 ...
- mac下安装php zookeeper扩展
安装步骤 php-zookeeper依赖libzookeeper,所以需要先安装libzookeeper 安装libzookeeper cd /usr/local/src/ wget http://m ...
- HNUSTOJ 1601:名字缩写
1601: 名字缩写 时间限制: 1 Sec 内存限制: 128 MB 提交: 288 解决: 80 [提交][状态][讨论版] 题目描述 Noname老师有一个班的学生名字要写,但是他太懒了,想 ...