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. ABAP基本数据类型

    ABAP 程序中共包含8种基本数据类型: 数据类型名称 描述 属  性 C Character Text(字符类型) 默认长度=1,默认值=blank,最大长度无限制 N Numeric Text(数 ...

  2. pycharm运行测试用例遇到错误:ZeroDivisionError: float division by zero的原因

    运行测试用例报错:ZeroDivisionError: float division by zero 一般是因为测试用例模块命名没有以test开头,导致unittest找不到用例,用例总数为0,导致除 ...

  3. 针对WordPress站点思路

    一.使用WPscan 1).简介 WPScan是一个扫描 WordPress 漏洞的黑盒子扫描器,它可以为所有 Web 开发人员扫描 WordPress 漏洞并在他们开发前找到并解决问题.我们还使用了 ...

  4. 20191110 Spring Boot官方文档学习(4.1)

    4. Spring Boot功能 4.1.Spring应用 便捷的启动方式: public static void main(String[] args) { SpringApplication.ru ...

  5. servlet3.0文件上传与下载

    描述:文件上传与下载是在JavaEE中常见的功能,实现文件上传与下载的方式有多种,其中文件上传的方式有: (1)commons-fileupload: (2)Servlet 3.0 实现文件上传 (3 ...

  6. SQL SERVER中求上月、本月和下月的第一天和最后一天[转]

    --上月的第一天 ),,,) ,,) --上月的最后一天 ),,,)),)+' 23:59:59' ,,)) --本月的第一天 ),,) ),)') --本月的最后一天 ),,,,)),)+' 23: ...

  7. JS跨域--window.name

    JS跨域--window.name:https://www.jianshu.com/p/43ff69d076e3

  8. numpy库的认识以及数组的创建

    numpy库 numpy是Python数值计算最重要的基础包.大多数提供科学计算的包都是用NumPy的数组作为构建基础.numpy十分高效,基于NumPy的算法要比纯Python快10到100倍(甚至 ...

  9. npm publish 失败可能的原因记录

    npm 发布个人包时,遇到不少坑,总结如下(可能不全): 1.npm版本过低,处理:npm install -g npm update 2.可能权限原因,处理:npm publish --access ...

  10. PY个康托展开

    卡 PY 的题,和 BIT 一样,不说了 内存还卡的挺紧的? 具体而言,刚好打完的 BIT 扒过来用用,然后打个阶乘就完事儿了 没什么好说的 Code fac=[0 for i in range(10 ...