js:
css:
.zhuantai{width: 90%;height: 70px;border-top: 1px solid #bdbcbc; border-bottom: 1px solid #bdbcbc; margin: 10px auto;}
.yinye{display: inline-block;height: 70px;width: 30%;float: left;color: #ff4949; font-size: 25px;line-height: 70px;text-align: center;}.xiuxi{display: inline-block;height: 70px;width: 30%;float: right;font-size: 25px;line-height: 70px;text-align: center;}
html:
<div class="zhuantai" id="zt">
<span class="yinye">营业中</span>
<span class="xiuxi">休息中</span>
</div>
<script type="text/javascript">
window.onload=function(){var lis=document.getElementById("zt").getElementsByTagName("span");
for(var i=0;i<lis.length;i++){
lis[i].setAttribute("index",i);
lis[i].onclick=function(){
for(var i=0;i<lis.length;i++){
if(this.getAttribute("index")==i){
lis[i].style.color="#ff4949";
lis[i].style.background="black";
}else{
lis[i].style.color="#060606";
lis[i].style.background="green";
}
}
}
}
}
</script>
jq:
css：
.on{background:#ff5d5e;color:#ffffff;}
html：
<div class="tag" id="list">
<label class="on">近三天</label>
<label>近一周</label>
<label>近一月</label>
</div>
<script type="text/javascript">
$(document).ready(
function () {
$("#list label").click(function () {
$(this).addClass("on").siblings().removeClass("on");
})
});
</script>
<style>
ul li{
list-style: none;
}
li{
width: 60px;
height: 30px;
color: #000;
background: #fff;
}
.on{
background: red;
color: #fff;
}
</style>
</head>
<body>
<div id="show_quan">
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script type="text/javascript">
$('#show_quan li').each(function(i,v){//遍历加
$(v).click(function(){
$(this).addClass('on').siblings().removeClass('on');
});
});
</script>
</body>