原理：利用JS的 document.getElementsByClassName() 获取类对应的标签对象。并用Dom对象属性中的 onmouseover 捕获鼠标划过状态时 执行 替换CSS样式 方法，并让其他标签元素隐藏，实现界面交互效果

<style>
         //大盒子样式（非重点部分）
        .best_box {
            width: 500px;
            text-align: center;
            padding: 10px;
            margin: 100px auto;
            border: 2px solid #ccc;
        }
        //菜单样式 无效果
        .bth {
            margin: 0px 5px;
        }
        //菜单样式 划过效果
        .bth.sey {
            transition:1s;
            color: orange;
        }
        //分区之间间隔（非重点部分）
        .content_box {
            margin-top: 10px;
        }
        //内容部分 不显示
        .content {
            display: none;
        }
        //内容部分 显示
        .content.see {
            display: block;
        }
    </style>
    <div class="best_box">
        <div class="menu_box">
            <span class="bth sey">栏目A</span>
            <span class="bth">栏目B</span>
            <span class="bth">栏目C</span>
        </div>
        <div class="content_box">
            <div class="content see">
                <p>::栏目A呈现的内容::</p>
                <p>我是SMM,其实不瞒你说。我已经继承了百万遗产</p>
            </div>
            <div class="content">
                <p>::栏目B呈现的内容::</p>
                <p>我是Aipo,一个喜欢画画的中二少女</p>
            </div>
            <div class="content">
                <p>::栏目C呈现的内容::</p>
                <p>我是叫夜夜,是群里的一个姬器人...</p>
            </div>
        </div>
    </div>
    <script>
        //获取在CCS类名为 bin 下的所有对应标签
        var getmenu = document.getElementsByClassName('bth');
        //获取在CCS类名为 contents 下的所有对应标签
        var contents = document.getElementsByClassName('content');
        for (let i = 0; i < getmenu.length; i++) {
            getmenu[i].index = i;
            getmenu[i].onmouseover = function () {
                for (let j = 0; j < getmenu.length; j++) {
                    //bth类中的标签重置样式:清除所有额外 see 样式
                    getmenu[j].className = getmenu[j].className.replace(' sey', '').trim();
                    //content类中的标签重置样式:清除所有额外 see 样式
                    contents[j].className = contents[j].className.replace(' see', '').trim();
                }
                //为选中标签以及对应的内容 添加see样式
                this.className = this.className + ' sey';
                contents[this.index].className = contents[this.index].className + ' see';
            }
        }
    </script>

原理与前一个方案例大致相同，用 document.getElementsByClassName() 获取 "bnt" 类对应的标签对象(按钮组件)。由于返回的是对象，所以需要用下标引用。用 onclick 捕获鼠标单击事件 执行修改css类实现界面样式的变化。

    <style>
        .box {
            width: 500px;
            padding: 20px;
            border: 2px solid #ccc;
            margin: 100px auto;
            text-align: center;
        }
        //该类实现标签隐藏
        .content {
            display: none;
        }
        //该类实现标签显示
        .content.see {
            display: block;
        }
    </style>
    <div class="box">
        <button class="bnt">显示全文</button>
        <h4>我其实很想说一件事！那就是...</h4>
        <div class="content">
            <p>这是隐藏的内容！</p>
        </div>
    </div>
    <script>
        //获取按钮位置
        var get_bnt = document.getElementsByClassName('bnt');
        var get_content = document.getElementsByClassName('content');

        get_bnt[0].onclick = function () {
            if (get_content[0].className == 'content') {
                get_bnt[0].innerHTML = '隐藏原文';
                get_content[0].className = get_content[0].className + ' see';
            } else {
                get_bnt[0].innerHTML = '显示原文';
                get_content[0].className = get_content[0].className.replace(' see', '').trim();
            }
        }
    </script>

点击按钮显示隐藏内容案例