js实现点击关注按钮,变成取消关注;如果是取消关注,就会变成点击关注 5
关注按钮代码:<divclass="btnfollowbtn-success"id="subscribe_collection_47"><adata-type="json...
关注按钮代码:
<div class="btn follow btn-success" id="subscribe_collection_47"> <a data-type="json" data-collection-id="47" data-remote="true" rel="nofollow" data-method="post" href="#" onclick="clickTxt(this)"> <span>已经关注</span> <i class="fa fa-fw fa-check"></i> </a>
</div>
效果图: 展开
<div class="btn follow btn-success" id="subscribe_collection_47"> <a data-type="json" data-collection-id="47" data-remote="true" rel="nofollow" data-method="post" href="#" onclick="clickTxt(this)"> <span>已经关注</span> <i class="fa fa-fw fa-check"></i> </a>
</div>
效果图: 展开
2个回答
展开全部
看看效果吧,收藏文章,鼠标移入颜色加深,点击变成“已收藏”,再次移入鼠标就有“取消收藏”,如果点击就会再变为“收藏文章”了
html代码:
<div id="shoucang">收藏文章</div>
CSS代码:
#shoucang{
background-color:#00b7ee;
line-height:36px;
width:88px;
text-align:center;
font-size:14px;
color:#ffffff;
border-radius:2px;
cursor:pointer;
}
.yishoucang{
width:11px;
height:8px;
background:url(img/yishoucang.png);
display:inline-block;
margin-right:9px;
}
JS代码:
<script>
window.onload = function (){
var oSc = document.getElementById('shoucang');
var onOff = true;
oSc.onclick = function (){
if(onOff){
oSc.innerHTML = '<i class="yishoucang"></i>'+'已收藏';
oSc.style.backgroundColor = '#87aab5';
onOff = false;
}else{
oSc.innerHTML = '收藏文章';
oSc.style.backgroundColor = '#87aab5';
onOff = true;
}
};
oSc.onmouseover = function (){
if(onOff){
oSc.style.backgroundColor = '#03a6d7';
}else{
oSc.innerHTML = '取消收藏';
oSc.style.backgroundColor = '#527884';
}
};
oSc.onmouseout = function (){
if(onOff){
oSc.style.backgroundColor = '#00b7ee';
}else{
oSc.innerHTML = '<i class="yishoucang"></i>'+'已收藏';
oSc.style.backgroundColor = '#87aab5';
}
};
}
</script>
小图标可以下载使用:
展开全部
<html>
<head>
<script type="text/javascript">
function change()
{
var btn = document.getElementById("btn");
btn.value="已关注";
btn.disabled=true;
}
</script>
</head>
<body>
<input type="button" id="btn" value="关注" onclick="change()"/>
</body>
</html>
<head>
<script type="text/javascript">
function change()
{
var btn = document.getElementById("btn");
btn.value="已关注";
btn.disabled=true;
}
</script>
</head>
<body>
<input type="button" id="btn" value="关注" onclick="change()"/>
</body>
</html>
追问
你是不是粘贴别人的代码啊,你看到了吗 我后面的代码是
这个是个图标 这个也要变
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询