1.引用Jquyer库
2.Jquery代码:
<script type="text/javascript"> $(function () { slidColor(‘ddaddresstype‘); slidColor(‘addresstimetype‘); }); function slidColor(id) { $("#"+id).children("a").each(function () { $(this).click(function () { $(this).addClass("on").siblings().removeClass().addClass("tab"); }); }); } </script>
3.html代码
.tab {
border: 1px solid #e5e5e5;
color: #222222;
float: left;
line-height: 26px;
margin-right: 10px;
text-align: center;
width: 100px;
}
.on {
border: 1px solid #abd13e;
color: #89b900;
text-decoration: none;
}
<dd id="ddaddresstype"> <a data-id="1" class="tab" href="javascript:void(0)">家庭地址</a> <a data-id="2" class="tab on" href="javascript:void(0)">公司地址</a> <a data-id="3" class="tab" href="javascript:void(0)">其他</a> </dd>
4.实现的效果截图:
时间: 2024-10-13 16:03:35