div点击变换样式
想要实现的效果是：默认情况下“群组”按钮是蓝色背景白色文字圆边框，点击“用户”以后“用户”按钮变成蓝色背景白色文字圆边框。用css或jquery都可以。真心求教！！...
想要实现的效果是：默认情况下“群组”按钮是蓝色背景白色文字圆边框，点击“用户”以后“用户”按钮变成蓝色背景白色文字圆边框。用css或jquery都可以。真心求教！！
展开
展开全部
这个应该可以实现你要的效果，原生JS写的，没用框架
<html>
<head>
<meta charset="utf-8" />
<style>
*{
margin: 0;
padding: 0;
}
#div{
height: 30px;
display: -webkit-box;
width: 200px;
border:1px solid deepskyblue;
border-radius:15px;
}
#div div{
height: 30px;
width: 50%;
text-align: center;
line-height: 30px;
color: deepskyblue;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="div">
<div onclick="select(this)" id="qunzu" style="background: deepskyblue;color: #ffffff;">群组</div>
<div onclick="select(this)" id="yonghu">用户</div>
</div>
<script>
function select(obj){
var div=document.getElementById("div").getElementsByTagName("div");
for(var i=0;i<div.length;i++){
if(div[i].id==obj.id){
div[i].style.background="deepskyblue";
div[i].style.color="#ffffff";
div[i].style.width="60%";
}else{
div[i].style.background="#FFFFFF";
div[i].style.color="deepskyblue";
div[i].style.width="40%";
}
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{
margin: 0;
padding: 0;
}
#div{
height: 30px;
display: -webkit-box;
width: 200px;
border:1px solid deepskyblue;
border-radius:15px;
}
#div div{
height: 30px;
width: 50%;
text-align: center;
line-height: 30px;
color: deepskyblue;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="div">
<div onclick="select(this)" id="qunzu" style="background: deepskyblue;color: #ffffff;">群组</div>
<div onclick="select(this)" id="yonghu">用户</div>
</div>
<script>
function select(obj){
var div=document.getElementById("div").getElementsByTagName("div");
for(var i=0;i<div.length;i++){
if(div[i].id==obj.id){
div[i].style.background="deepskyblue";
div[i].style.color="#ffffff";
div[i].style.width="60%";
}else{
div[i].style.background="#FFFFFF";
div[i].style.color="deepskyblue";
div[i].style.width="40%";
}
}
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用CSS：
这里用户用class=”user“代替，群组用class=”ab“代替
.user:foucs{background:blue,color:#FFF}
.ab:foucs{background:blue;color:#FFF}(这里是用的伪类，其结果类似JS写的一样)
用JS
$(fucntion(){
$('.user').click(function(){
$('.user').css("backgroundColor","blue");
$('.user').css("color","#FFF")
$('.ab').css("backgroundColor","#FFF")
$('.ab').css("color","#ccc")
})
})
这里用户用class=”user“代替，群组用class=”ab“代替
.user:foucs{background:blue,color:#FFF}
.ab:foucs{background:blue;color:#FFF}(这里是用的伪类，其结果类似JS写的一样)
用JS
$(fucntion(){
$('.user').click(function(){
$('.user').css("backgroundColor","blue");
$('.user').css("color","#FFF")
$('.ab').css("backgroundColor","#FFF")
$('.ab').css("color","#ccc")
})
})
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
直接：
$(function(){ $(".sp_xz ul li p").click(function(){ 尝禒佰溉脂防拌狮饱饯 $(".li_P1").eq($(this).parent().index()).css({'border':'#F60 solid 2px' }) }) 还有就是，为什么不直接在每个div块上直接click,而要通过点击其他的元素来控制.li_p1的样式呢？
$(function(){ $(".sp_xz ul li p").click(function(){ 尝禒佰溉脂防拌狮饱饯 $(".li_P1").eq($(this).parent().index()).css({'border':'#F60 solid 2px' }) }) 还有就是，为什么不直接在每个div块上直接click,而要通过点击其他的元素来控制.li_p1的样式呢？
追问
没有看懂你的代码..详细说一下可以吗
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(function(){
$("#list li").click(function(){
$(this).siblings().removeClass("selected");
$(this).addClass("selected");
});
});
$("#list li").click(function(){
$(this).siblings().removeClass("selected");
$(this).addClass("selected");
});
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
toggleClass
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
