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>
效果图:
展开
 我来答
佐藤木马拉伊
2019-01-07
知道答主
回答量:30
采纳率:11%
帮助的人:5.6万
展开全部

看看效果吧,收藏文章,鼠标移入颜色加深,点击变成“已收藏”,再次移入鼠标就有“取消收藏”,如果点击就会再变为“收藏文章”了

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>

小图标可以下载使用:

月光羔儿我放荡
2016-05-14 · TA获得超过150个赞
知道小有建树答主
回答量:321
采纳率:0%
帮助的人:208万
展开全部
<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>
追问
你是不是粘贴别人的代码啊,你看到了吗  我后面的代码是
这个是个图标 这个也要变
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式