Javascript 正确使用show元素onclick

我有3个css按钮，1个在文章顶部，2个在底部。我想隐藏底部的按钮。如果用户单击顶部按钮，他将被导航到底部按钮，底部按钮将可见。但似乎不能使它如预期的那样工作

这是我试过的

函数showbtn（）{
var x=document.getElementById（“btn”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

/*Awesome按钮css Start*/
.btn保证金{
保证金上限：1.6雷姆；
框大小：继承；
文本对齐：居中；
}
.btn{
-webkit点击突出显示颜色：透明；
边界半径：2px；
盒影：rgba（0,0,0,0.14）0 3px 3px 0，rgba（0,0,0,0.12）0 1px 7px 0，rgba（0,0,0,0.2）0 3px 1px-1px；
框大小：继承；
颜色：白色！重要；
光标：指针；
显示：内联块；
高度：自动；
字母间距：0.5px；
线高：42px；
指针事件：全部；
位置：相对位置；
文字装饰线：无；
垂直对齐：中间对齐；
字号：1.6em；
填充：0.2em；
过渡时间：800ms；
}
.btn绿色{
背景色：#1AAB8A；
}
.btn绿色：悬停{
背景色：#fff；
颜色：#1AAB8A！重要；
}
.btn蓝色{
背景色：#0abed；
}
.btn蓝色：悬停{
背景色：#fff；
颜色：#0abed！重要；
}
.btn:之前，.btn:之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
高度：2倍；
宽度：0；
过渡时间：400ms；
}
.btn:之后{
权利：继承；
顶部：继承；
左：0；
底部：0；
}
.btn绿色：之前，.btn绿色：之后{
背景：#1AAB8A；
}
.btn蓝色：之前，.btn蓝色：之后{
背景：#0abed；
}
.btn:悬停：之前.btn:悬停：之后{
宽度：100%；
过渡时间：800ms；
}
/*很棒的按钮css结束*/

内容。。。。。。。。。。。。。。。。

默认情况下，您需要使用

显示：无

隐藏第二个按钮组，然后单击即可显示

函数showbtn（）{
var x=document.getElementById（“btn”）；
x、 style.display=“block”；
}

/*Awesome按钮css Start*/
.btn保证金{
保证金上限：1.6雷姆；
框大小：继承；
文本对齐：居中；
}
.btn{
-webkit点击突出显示颜色：透明；
边界半径：2px；
盒影：rgba（0,0,0,0.14）0 3px 3px 0，rgba（0,0,0,0.12）0 1px 7px 0，rgba（0,0,0,0.2）0 3px 1px-1px；
框大小：继承；
颜色：白色！重要；
光标：指针；
显示：内联块；
高度：自动；
字母间距：0.5px；
线高：42px；
指针事件：全部；
位置：相对位置；
文字装饰线：无；
垂直对齐：中间对齐；
字号：1.6em；
填充：0.2em；
过渡时间：800ms；
}
.btn绿色{
背景色：#1AAB8A；
}
.btn绿色：悬停{
背景色：#fff；
颜色：#1AAB8A！重要；
}
.btn蓝色{
背景色：#0abed；
}
.btn蓝色：悬停{
背景色：#fff；
颜色：#0abed！重要；
}
.btn:之前，
.btn:之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
高度：2倍；
宽度：0；
过渡时间：400ms；
}
.btn:之后{
权利：继承；
顶部：继承；
左：0；
底部：0；
}
.btn格林：之前，
.btn格林：之后{
背景：#1AAB8A；
}
.btn蓝：之前，
.btn蓝色：之后{
背景：#0abed；
}
.btn:悬停：在，
.btn:悬停：之后{
宽度：100%；
过渡时间：800ms；
}
#btn{
显示：无；
}
/*很棒的按钮css结束*/

内容。。。。。。。。。。。。。。。。

我有两个css按钮…您有3个按钮，而不是2个！！！对不起。我是说两套钮扣。。已编辑的@Mamunit对我来说工作得很好：/（尽管在开始时可以看到两个按钮），但您的代码工作正常。当您单击顶部按钮时，它会显示/隐藏底部的2个按钮，而不是使用javascript代码编译css并尝试使用引导本机类。尝试切换类

d-none

（隐藏元素）和/或

d-block

（显示元素）。因此，在js中，您可以计算出逻辑，并让css完全管理元素的样式。