您的位置：首页 > Web前端 > CSS

A标签-一个按钮样式

2016-07-19 15:37 573 查看

该文件引用jquery-1.11.3.js库

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>A标签样式</title>
<style>
.sel_btn{
height: 21px;
line-height: 21px;
padding: 0 11px;
background: #02bafa;
border: 1px #26bbdb solid;
border-radius: 3px;
/*color: #fff;*/
display: inline-block;
text-decoration: none;
font-size: 12px;
outline: none;
}
.ch_cls{
background: #e4e4e4;
}
</style>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
</head>
<body>
    
<a class="sel_btn ch_cls" id="sel_btn1" href="#" onclick="changeSelBtn(1)">全天</a>
<a class="sel_btn" id="sel_btn2" href="#" onclick="changeSelBtn(2)">上午</a>
<a class="sel_btn" id="sel_btn3" href="#" onclick="changeSelBtn(3)">下午</a>
<hr>
<script type="text/javascript">
function changeSelBtn(index){
if(index==1){
$("#sel_btn1").addClass('ch_cls');
$("#sel_btn2").removeClass('ch_cls');
$("#sel_btn3").removeClass('ch_cls');
}else if(index==2){
$("#sel_btn1").removeClass('ch_cls');
$("#sel_btn2").addClass('ch_cls');
$("#sel_btn3").removeClass('ch_cls');
}else if(index==3){
$("#sel_btn1").removeClass('ch_cls');
$("#sel_btn2").removeClass('ch_cls');
$("#sel_btn3").addClass('ch_cls');
}

}
</script>
</body>

</html>

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航