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();
})
jquery +点击按钮,切换div内容,按钮加高亮的更多相关文章
- jQuery点击缩略图切换大图代码
很多网站上都会有点击缩略图切换成大图的效果,下面来分享一下它的源码 还是先来看效果截图 运行文件 然后点击下一张 下面分享源代码 html文件 <!DOCTYPE html PUBLIC &qu ...
- Jquery点击除了指定div元素其他地方,隐藏该div
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...
- 锋利的Jquery(点击显示隐藏div)
点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 点击弹出div内容包括遮罩层
效果: HTML: <!-- 添加分组按钮 --> <div class="group_add" onclick = "docu ...
- JQuery点击标题实现div的收缩
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jquery点击来回切换
做个笔记偶尔用有时记不住 方法一: <div id="test"> test </div> $('#test').mouseover(function () ...
- jquery 点击空白处隐藏div元素
<style type="text/css">.pop {display:none;width: 200px;height: 130px;background: #08 ...
- jquery 点击事件切换样式
$('#FatherName').on('click', '.ClassName', function(e){ $('.ClassName').removeClass('active'); $(thi ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
随机推荐
- Delphi中TQuery.Filter用法
今天维护一个老项目是用delphi5 + BDE写的.为了更方便查询数据,就增加一个查询功能.由于数据量查询出来后就比较少,于是就想到Filter like 但 BDE并不支持 Filter = 'n ...
- 【转载】linux下如何使用sftp命令
原文地址:http://www.cnblogs.com/chen1987lei/archive/2010/11/26/1888391.html sftp 是一个交互式文件传输程式.它类似于 ftp, ...
- MySql 性能优化之 Explain
MySQL 之 Explain 输出分析 背景 前面的文章写过 MySQL 的事务和锁,这篇文章我们来聊聊 MySQL 的 Explain,估计大家在工作或者面试中多多少少都会接触过这个.可能工作中实 ...
- DateHandler日期处理工具(JSP中使用后台工具类)
1.DateHandler.java package Utils.dateHandler; import java.text.ParseException; import java.text.Simp ...
- 记一次有趣的JsonFormat不生效问题
dto中使用了JsonFormat注解,如图 然后再序列化时 objectMapper.writeValueAsString(printReceBillVO) 始终值是一个Long,最后发现是包引用错 ...
- 题解 AT2684 【K-City】
此题这么水,竟然发题解的这么少. 本蒟蒻也来发一篇QwQ. 题目中所谓“四条街包围一个街区”其实就是两条街之间夹一个街区而已: n条街有几条两两相邻呢?答案是n-1条: m条街有几条两两相邻呢?答案是 ...
- A广搜
<span style="color:#330099;">/* A - 广搜 基础 Time Limit:2000MS Memory Limit:65536KB 64b ...
- ArcGIS Server导出shp文件
需求: 在项目中客户提出需要在Web端能够定义条件将后台的数据导出shp文件,并下载. 实现: 基于ArcGIS开发导出矢量数据的服务,用户输入导出数据类型.过滤条件.导出范围等条件,服务能够快速将相 ...
- Qt读写Json
Qt操作Json 1.QJsonDocument 1.详细说明 QJsonDocument类提供了读写JSON文档的方法. QJsonDocument是一个封装了完整JSON文档的类,可以从基于UTF ...
- SpringMVC+Spring4+Mybatis3
http://blog.csdn.net/jiuqiyuliang/article/details/45286191 http://blog.csdn.net/jiuqiyuliang/article ...