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. ubuntu 16.04 配置ssl

    Let's Encrypt 的服务相信很多人都知道了,我个人认为这是最好的免费 SSL 服务.下面内容即使如何在自己的网站上使用 Let's Encrypt 实现 SSL. 前提条件 自己拥有一个域名 ...

  2. Java ——重写、多态、抽象类

    本节重点思维导图 重写 子类覆盖父类同名的方法 final关键字:不可变的 public static final PAGE_SIZE = 18; final修饰的类不能做为父类被子类继承. 多态 多 ...

  3. Java ——异常处理

    本节重点思维导图 详细戳——> 异常处理

  4. Linux 查看CPU 核数 还有 CPU 个数的命令

    cat /proc/cpuinfo | grep 'physical id' | sort | uniq | wc -l 个数 cat /proc/cpuinfo | grep 'process' | ...

  5. Linux yum 命令篇

    yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理,能够从指定的服务器自动下载RPM包 ...

  6. 高性能迷你React框架anujs1.1.3发布

    anujs现在只差一个组件(mention)就完全支持阿里的antd UI库了.一共跑通346个测试, 应该是全世界最接近官方React的迷你框架了. 以后的工作就是把React16的一些新特性支持了 ...

  7. Find The Multiple (水题)

    Given a positive integer n, write a program to find out a nonzero multiple m of n whose decimal repr ...

  8. [零基础学python]啰嗦的除法

    除法啰嗦的,不仅是python. 整数除以整数 看官请在启动idle之后.练习以下的运算: >>> 2/5 0 >>> 2.0/5 0.4 >>> ...

  9. Chrome浏览器记住密码后input框黄色背景且背景图片不显示的问题

    Chrome浏览器记住密码后再进入登录页后,输入框背景颜色变为黄色,字体颜色变成#000黑色,且添加的背景图片也那不显示了,进入审查元素后,发现浏览器默认给输入框添加了样式,并且无法通过importa ...

  10. 小程序中页面兼容h5标签的解析

    有时候当小程序向后台拿数据是一篇html标签的文章时,把它放进小程序会发现很多标签就不兼容,如果要一个个改又很麻烦,有没有方法可以很快地兼容html标签呢? 有个工具可以做到:wxParse 下载了它 ...