jQuery点击选择购买年份月份日期特效

1、新建html文档。

3、书写css代码。<style> *{padding:0;margin:0;} html{font-family:"Microsoft Yahei",Arial,sans-serif;font-size: 12px;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td{padding:0;margin:0;font-family:"Microsoft YaHei",sans-serif,Arial} table{border-collapse:collapse;border-spacing:0} fieldset,img{border:0} a{text-decoration:none;color:#000;outline:none} li{list-style:none;} caption,th{text-align:left} h1,h2,h3,h4,h5,h6{font-weight:normal;} input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;outline:medium;} input,button,textarea,select{*font-size:100%} .fl{float:left;} .fr{float:right;} .clear:after{display:block;content:"clear";height:0; clear:both; overflow:hidden; visibility:hidden;} .clear{zoom:1;} .sliderBar{margin:100px 10px;width:1134px;border:1px solid #FFCC00;background: #F2F2F2;} .sliderBar li{position: relative;float: left;width: 80px;height: 30px;line-height: 30px;border-right:1px solid #FFCC00;text-align: center;} .sliderBar li:last-child{border:none;} .sliderBar li:hover{background: #FCF8E3;cursor: pointer;cursor: hand;} .sliderBar li p{text-align: center;} .indexP{display: none;position: absolute;left:50%;top:-53px;margin-left: -40px;width: 85px;height: 30px;line-height: 30px;border:1px solid #FFCC00;background: #FCF8E3;} .shanjiao-out{position:absolute;right:36px;width:0;height:0;border-width:8px;border-style:solid;border-color: #ffcc00 transparent transparent transparent;} .shanjiao-inner{position:absolute;right:37px;width:0;height:0;border-width:7px;border-style:solid;border-color: #FCF8E3 transparent transparent transparent;}</style>

5、代码整体结构。