jquery +点击按钮，切换div内容,按钮加高亮
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();
})
最新文章
- 听H3絮叨：何以让天下没有难用的流程
- Windows cmd 长时间不输出新内容 直到按下ctrl + c 取消或者回车的解决办法
- PHP 面向对象编程和设计模式 (5/5) - PHP 命名空间的使用及名称解析规则
- Android中的AlertDialog使用示例五（自定义对话框）
- Expression Blend 4 学习笔记
- vsftpd 修改默认目录
- [整理]android中几种常见的尺寸
- dedecms 列表每隔6行输出一个空li
- 检查.net代码中占用高内存函数(翻译)
- 【转】Linux Framebuffer
- ASP.NET MVC- VIEW Overview Part 1
- node 与php整合
- Google机器学习教程心得（三） 好的feature
- freemarker错误九
- 如何阻止sql注入（pdo篇）
- linux连接mysql 出现Access denied for user 'root'@'localhost'(using password: YES)错误解决方案
- Java基础学习笔记六 Java基础语法之类和ArrayList
- pcntl php多进程
- linux与Windows使用编译区别及makefile文件编写
- google使用的开源的工具类Thumbnailator图像处理