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. Elasticsearch 安装head插件

    一.简介 elasticsearch-head是一个界面化的集群操作和管理工具,可以对集群进行傻瓜式操作.你可以通过插件把它集成到es(首选方式),也可以安装成一个独立webapp. Elastics ...

  2. golang 导出CSV文件中文乱码的问题

    golang  导出CSV文件中文乱码的问题 解决办法: 在csv文件的开头写入 UTF-8 BOM // 创建文件 dstf, err := os.Create("./data/" ...

  3. oracle dis系列课程总结

    oracle dis系列课程总结 1 bbed安装和介绍 --1 bbed的安装--(Oracle Block Brower and EDitor Tool) 2 controlfile 丢失的恢复 ...

  4. PHP is_file() 函数

    is_file() 函数检查指定的文件名是否是正常的文件. 语法is_file(file)参数 描述file 必需.规定要检查的文件.说明如果文件存在且为正常的文件,则返回 true. 提示和注释 注 ...

  5. Android - Unable to add window android.view.ViewRootImpl$W@6518342 -- permission denied for window type 2133

    因为跟博主碰到了一样的问题,所以记录一下分析原理 原文链接:https://www.jianshu.com/p/b0364074288a 首先,先介绍下背景环境,第一,是Android7.0,其次,要 ...

  6. CentOS7编译安装sshpass过程

    环境说明:centos 7 cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) 我的sshpass版本 sshpass-1.06. ...

  7. 关于Logcat

    1 android logcat api Log.i(String tag, String msg) info,普通信息 Log.d(String tag, String msg) debug,调试信 ...

  8. 在Visual studio 2017中使用EF6连接MySQL

    在Visual studio 2017中使用EF6连接Mysql ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) ...

  9. TCP/IP四层协议

    1.数据链路层 数据链路层实现了网卡接口的网络驱动程序,处理数据在物理媒介(以太网,令牌环)上的传输,常用协议包含ARP(地址解析协议),RARP(逆地址解析协议)两个协议,他们实现了IP地址和物理地 ...

  10. Red Hat Enterprise Linux查看系统版本命令

    # arch 返回结果为i686表示32位系统,x86_64表示64位系统. # uname -a # uname -r # lsb_release -a # cat /proc/version # ...