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内容,按钮加高亮的更多相关文章

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

    很多网站上都会有点击缩略图切换成大图的效果,下面来分享一下它的源码 还是先来看效果截图 运行文件 然后点击下一张 下面分享源代码 html文件 <!DOCTYPE html PUBLIC &qu ...

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

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...

  3. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  4. 点击弹出div内容包括遮罩层

    效果: HTML: <!-- 添加分组按钮 -->             <div class="group_add" onclick = "docu ...

  5. JQuery点击标题实现div的收缩

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. jquery点击来回切换

    做个笔记偶尔用有时记不住 方法一: <div id="test"> test </div> $('#test').mouseover(function () ...

  7. jquery 点击空白处隐藏div元素

    <style type="text/css">.pop {display:none;width: 200px;height: 130px;background: #08 ...

  8. jquery 点击事件切换样式

    $('#FatherName').on('click', '.ClassName', function(e){ $('.ClassName').removeClass('active'); $(thi ...

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

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

随机推荐

  1. 2018.03.27 python pandas merge join 使用

    #2.16 合并 merge-join import numpy as np import pandas as pd df1 = pd.DataFrame({'key1':['k0','k1','k2 ...

  2. 类Enum

    int compareTo(E o) 比较此枚举与指定对象的顺序. String name() 返回此枚举常量的名称,在其枚举声明中对其进行声明. int ordinal() 返回枚举常量的序数(它在 ...

  3. 【HANA系列】SAP HANA 2.0简介

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA 2.0简介   ...

  4. 【Linux开发】【Qt开发】arm-linux-gnueabihf-gdb versus gdb-multiarch

    主要是说,在Ubuntu14.04 64bit的操作系统上,配置Qt的gdb和gcc的时候,在Qt build&run选项中,debugger中选中arm-linux-gnuabihf-gdb ...

  5. SQL查询结果列拼接成逗号分隔的字符串:group_concat

    转自:SQL查询结果列拼接成逗号分隔的字符串 背景:做SQL查询时会经常需要,把查询的结果拼接成一个字符串. 解决方法: 通过 group_concat 函数 拼接的结果很长,导致拼接结果显示不全,可 ...

  6. linux下定时器的实现

    简介: linux下经常有这样的需求,需要定时轮询执行某种任务,当然,用shell脚本的话,crontab和at就可以满足要求.如果从C语言的角度来看,实现定时器也是一个比较简单的任务,因为具有普遍性 ...

  7. P-残缺的棋盘

    Input 输入包含不超过10000 组数据.每组数据包含6个整数r1, c1, r2, c2, r3, c3 (1<=r1, c1, r2, c2, r3, c3<=8). 三个格子A, ...

  8. 制作的第一个java小游戏

    package java1; import java.awt.*; public class java1 extends Frame { //球桌和桌球图片 Image ball = Toolkit. ...

  9. solr集群搭建(SolrCloud)

    SolrCloud(solr 云)是 Solr 提供的分布式搜索方案,当你需要大规模,容错,索引量很大,搜索请求并发很高时可以使用SolrCloud.它是基于 Solr 和Zookeeper的分布式搜 ...

  10. Redis---键的过期时间及数据淘汰策略

    5.键的过期时间   Redis可以为每个键设置过期时间,当键过期时,会自动删除该键.   对于散列表这种容器,只能为整个键设置过期时间(整个散列表),而不能为键里面的单个元素设置过期时间. 6.数据 ...