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. Selenium学习之==>三种等待方式

    在UI自动化测试中,必然会遇到环境不稳定,网络慢的情况,这时如果你不做任何处理的话,代码会由于没有找到元素,而报错.这时我们就要用到wait(等待),而在Selenium中,我们可以用到一共三种等待, ...

  2. C# 无焦点获取扫码枪扫码信息

    代码网上有的是,多是需要窗体焦点直接show出扫码信息(usb,模拟键盘,hook) 怎样才能真的无焦点获取? 用串口方式 usb转串口 以接收串口通讯消息的方式获取扫码信息

  3. excel 字母变大写 宏

    Sub ConvertToUpperCase() Dim Rng As Range Worksheets("Sheet1").UsedRange.Select For Each R ...

  4. 【Bean】标签常用属性

    [Bean]标签常用属性 Id 说明:起名称,id属性值名称任意,不能包含特殊符号,根据id得到配置对象. Class 说明:创建对象所在类的全路径. Name 说明:功能和id是一样的,id属性值不 ...

  5. MACBOOK蓝牙连接丢失恢复

    MACBOOK用户可能会碰到一个神奇而无奈的问题: 某些情况下,很多时候从睡眠状态回来,会发现蓝牙设备再也无法连接,包括蓝牙鼠标.键盘等等... 恢复方法一般是,重启或注销后重新登陆,然后所有工作现场 ...

  6. Java与C#不同

    1.C#方法定义可以有默认参数,而Java则不支持该方式. C#方法定义 public void ShowMessage(string text,string orderId="" ...

  7. linux/linux学习笔记-Shell基础(mooc)

    一.shell概述 shell根据ascII表,将命令翻译为0101...传给内核执行. 内核->shell翻译为命令->用户(操作的界面就是shell,shell=翻译官) linux标 ...

  8. [BZOJ 3123] [SDOI 2013]森林(可持久化线段树+并查集+启发式合并)

    [BZOJ 3123] [SDOI 2013]森林(可持久化线段树+启发式合并) 题面 给出一个n个节点m条边的森林,每个节点都有一个权值.有两种操作: Q x y k查询点x到点y路径上所有的权值中 ...

  9. anconda下安装opencv

    提示:如果你安装了python其它版本,或者在anaconda中创建了虚拟环境,应该先激活你的环境,然后再在命令窗口执行下面的操作 1.首先下载所需镜像文件: 我们需要上网站去下载我们需要的版本. 官 ...

  10. linux:服务器代理squid安装配置

    国内上往外的网站太慢,配了个香港代理服务器.如下:当前环境: centos系统.香港服务器IP(假设:59.188.71.11)检查squid是否安装:[root@localhost ~]# rpm ...