【JS】用JS实现系统常见日周月时间按钮切换效果

这里的页面样式基于bootstrap.css样式文件，时间控件引用的是datetimepicker.js,如果想详细了解时间控件的操作，可以参考网址http://www.bootcss.com/p/bootstrap-datetimepicker/,本篇文章只简单介绍按钮控件的简单切换，先上效果图：

1.HTML

   

	   

	       
日
           
周
           
月
		
  
  

      

          

	          
	          至
              
          
          

	          
              至
              
         
         

			
	        至
            
         
       
     
  

2.CSS样式
其中很多样式都引用了bootstrap.css文件，一些按钮样式或者相关的在这里就不在赘述

.btn-group {
    border: 1px solid #AAA4A4;
    border-radius: 3px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.btn-default {
    background: #fff;
    margin-top: 0;
    position: relative;
    top: 0;
    color: #2863AD;
    border: 0;
    z-index: 100;
}
.btn-default:hover, .content .btn-default.active{
    color: #fff;
    background: #2863AD;
    border-color: #2863AD;
}

3.JS代码

//实现按钮切换以及对应时间框的显示隐藏效果
//这里注意上面的html的
元素中的id="time",以及对应元素中data-time和data-role的用法，这种写法复用性很强，类似功能的直接修改对应id就可以
$(function(){
	$('#time [data-role="time"]').click(function(e){
        $(e.currentTarget).addClass('active').siblings().removeClass('active') ;//增加删除时间选中的样式
	    $('#'+$(e.currentTarget).data('time')).show().siblings().hide();//显示隐藏对应选择时间的日期选择框
    });
})

这里结合了bootstrap框架和H5 的data-属性，有兴趣的可以了解一下，这里提供官方文档地址：
http://v3.bootcss.com/
下一篇接着更新时间选择器datetimepicker的用法，和这篇样式结合到一起，就可以根据自己的需求实现年月日周等时间选择的效果了