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>
js:
<script type="text/javascript">
window.οnlοad=function(){
var lis=document.getElementById("zt").getElementsByTagName("span");
for(var i=0;i<lis.length;i++){
lis[i].setAttribute("index",i);
lis[i].οnclick=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>
<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>