js实现简易关注按钮点击事件

最新推荐文章于 2025-10-31 21:02:03 发布

原创最新推荐文章于 2025-10-31 21:02:03 发布 · 4.3k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

js 专栏收录该内容

3 篇文章

订阅专栏

本文记录了一个简单的Web交互效果实现过程——关注按钮的状态切换。通过HTML、CSS及JavaScript的配合，实现了从“关注”到“已关注”的状态转换，并分享了作者在实现过程中遇到的问题及解决方案。

学了web有一个月了

总想记点什么，但是一直没有行动，今天做了这个效果就记录一下吧

顺便总结下遇到的问题，也是为了以后可以更好的回顾。

下面上代码截图

html：

<button class="follow" onclick="show1()">
                    <span class="true">关注</span>
                    <span class="false">已关注</span>
                </button>

这边就是很简单的一个按钮，定义了两个span

css代码：

/*关注按钮*/
.follow{
    display: block;
    width: 25%;
    height: 30px;
    margin: 0 auto;
    margin-top: 8px;
    background: rgba(233, 7, 7, 0);
    border: 1px solid red;
    border-radius: 5px;
    color: red;
    outline: none;
}
.follow:hover{
    background: rgba(233, 7, 7, 0.2);
}
.true{
    display: inline;
}
.false{
    display: none;
}

初始为关注点击一下变为已关注再点击就变为关注，这样重复下去。

js代码：

function show1(){
    var aTrue = document.getElementsByClassName(true);
    var aFalse = document.getElementsByClassName(false);
    var x=1;
    if ( aTrue[0].style.display!="none"){
        aTrue[0].style.display="none";
        aFalse[0].style.display="inline";
    }else{
        aTrue[0].style.display="inline";
        aFalse[0].style.display="none";
    }
}

前面写的都没有问题，但是在点击事件的时候遇到了一个小问题。

if判断总是进不去，后来发现是因为我的判断条件中的aTrue后面没有加数组 [0]

就是aTru[0] 这里出现的问题，其实我还不是很懂这个原理，应该是同样的class可以定义多个，所以需要数组进行区分吧。

所以我想试试id来进行定义，看看是否有这种情况出现。

html和css一样，只不过把class的名字改为id

js代码：

function show1(){
    var aTrue = document.getElementById(true);
    var aFalse = document.getElementById(false);
    if ( aTrue.style.display!="none"){
        aTrue.style.display="none";
        aFalse.style.display="inline";
    }else{
        aTrue.style.display="inline";
        aFalse.style.display="none";
    }
};