Javascript 如何修复异常网页行为-多个btn活动；“投资组合”；

我在修复这个不寻常的网页行为时遇到了一个问题。我已经包括了Github页面链接。移除导航标签后，问题得到解决。但我需要导航标签

我试图从dev控制台删除nav元素，发现nav标签影响了下面的“车间简介”部分

以下是Github页面链接：

Github代码：

画廊
切割和雕刻产品系列

文件夹
全部展示
木刻
石刻
玻璃雕刻
其他切割和雕刻

---

我希望公文包部分“workshop_intro”按钮一次突出显示一个，而不删除nav标记。

问题可能是由于“active”类中存在另一个HTML元素。查询

document.getElementsByClassName（“活动”）正在从导航栏返回li元素



要更准确地选择按钮，可以使用
document.querySelector（“.btn.active”）

下面是工作代码


filterSelection（“all”）//执行函数并显示所有列
函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“列”）；
如果（c==“全部”）c=“”；
//将“show”类（display:block）添加到过滤的元素中，并从未选择的元素中删除“show”类
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
//显示筛选的元素
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}
//将活动类添加到当前按钮（高亮显示）
var btnContainer=document.getElementById（“myBtnContainer”）；
var btns=btnContainer.getElementsByClassName（“btn”）；
对于（变量i=0；i

.main{
最大宽度：1000px；
保证金：自动；
}
h1{
字体大小：50px；
单词break：打破一切；
}
.行{
利润率：8px-16px；
}
/*在每列之间添加填充（如果需要）*/
一行
.row>列{
填充：8px；
}
/*创建三个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：33.33%；
显示：无；/*默认情况下隐藏列*/
}
/*清除行后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*内容*/
.内容{
背景色：白色；
填充：10px；
}
/*“show”类被添加到过滤的元素中*/
.表演{
显示：块；
}
/*设计按钮的样式*/
.btn{
边界：无；
大纲：无；
填充：12px 16px；
背景色：白色；
光标：指针；
}
/*在鼠标悬停时添加灰色背景色*/
.btn:悬停{
背景色：#ddd；
}
/*为活动按钮添加深色背景色*/
.btn.active{
背景色：#666；
颜色：白色；
}
正文，html{
字体系列：“开放式Sans”，无衬线；
身高：100%；
溢出x：隐藏；
滚动行为：平滑；
}
* {
保证金：0；
填充：0；
}
.行{
保证金：0；
}
/*标题*/
/*标题部分*/
.介绍{
显示：表格；
宽度：100%；
最小高度：88vh；
填充：0；
背景：url（../images/tooplate_middle_alt2.png）顶部中间不重复；
背景色：#f6f6f6；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
背景尺寸：封面；
-o-背景尺寸：封面；
}
.简介{
字体大小：94px；
边缘底部：40px；
颜色：#fff；
}
.简介h3{
颜色：#fff；
字体大小：45px；
字号：700；
边际上限：0；
边缘底部：10px；
文本转换：大写；
}
.简介p{
颜色：#fff；
字体大小：22px；
边缘顶部：20px；
线高：28px；
边缘底部：40px；
}
.intro.btn自定义{
边框顶部：1px实心rgba（255255,0.4）；
边框底部：1px实心rgba（255255,0.4）；
}
标题.介绍文本{
边缘顶部：100px；
边缘底部：100px；
文本对齐：居中；
背景色：rgba（0,0,0,0.5）；
填充：25px 25px；
}
.简介正文一{
颜色：白色；
/*尺寸：20px*/
}
.介绍文字a{
光标：指针；
/*过渡：所有0.9秒；
过渡性质：全部；
过渡时间：0.9秒；
过渡时间功能：轻松；
转换延迟：0s*/
}
/*网格截面*/
.网格列表{
填充顶部：25px；
垫底：25px；
}
.r1{
边缘底部：25px；
}
.r2{
边缘底部：25px；
}
.圆形img{
位置：相对位置；
宽度：165px；
身高：165px；
边界半径：50%；
边框：10px固体rgba（0,0,0,0.1）；
}
.更多{
光标：指针；
}
.最新情况{
填充：50px 0 50px 0；
背景：#f6f6f6；
}
.更新{
填充：20px 0 20px 0；
}
.合伙人{
填充：20px 0 20px 0；
}
.缩略图{
最大高度：100%；
最大宽度：100%；
对象匹配：覆盖；
利润率：10px 0 10px 0；
}
/*页脚*/
页脚{
背景：#333；
宽度：100%；
/*填充：30px 0 20px*/
}
页脚.容器{
填充：30px 0 20px；
}
页脚：社会保险{
显示：内联块；
填充：0 20px；
}
页脚p{
颜色：#666；
字体大小：15px；
}
.公司{
填充顶部：25px；
}
.头衔{
颜色：灰色；
}
.第二轮img{
位置：相对位置；
最大宽度：65%；
高度：自动；
边界半径：50%；
边框：10px固体rgba（255255,0.1）；
}
fakeimg先生{
背景色：#aaa；
宽度：100%；
填充：20px；
}
.blg_img img{
宽度：100%；
P
<section class="workshop_intro">
<div class="container py-2">
  <h1 class="py-4"><strong>Gallery</strong></h1>
  <p>Cut and Engraved products range</p>

  <h2>PORTFOLIO</h2>
  <div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')"> Show all</button>
    <button class="btn" onclick="filterSelection('wood')"> Wood Cutting and Engraving</button>
    <button class="btn" onclick="filterSelection('stone')"> Stone Engraving</button>
    <button class="btn" onclick="filterSelection('glass')"> Glass Engraving</button>
    <button class="btn" onclick="filterSelection('others')"> Others Cutting and Engraving</button>
  </div>