我创建了一个JS Fiddle，因为我在使子按钮与JQuery一起工作时遇到了问题。
CSS
body{padding: 0; margin: 0; background-color: #eeeeee; font-family: calibri;}
.main{width: 90%; margin-left: auto; margin-right: auto; border-radius: 5px; padding: 8pt;}
#company-logo{padding: 8pt; width: 100%; text-align: center;}
#company-logo img{width: 60%;}
#reg{font-size: 10pt;}
#labeltext{font-size: 16pt; font-family: calibri;}
#menu-box{background-color: #ffffff; padding: 8pt 6pt; border-radius: 5px; border: solid 1pt #777777;}
.menu{width: 100%; background-color: #bbbbbb; border: 0; padding: 2pt; margin-bottom: 5pt; box-shadow: 0 1pt 2pt #777777; }
.menu:hover, .menu-inbanner:hover, .menu-inheader:hover, .menu-inlist:hover, .menu-intable:hover, .menu-ingraph:hover, .menu-inss:hover{background-color: #dddddd; color: #000000; border: 0; }
#stage{background-color: #ffffff; padding: 8pt 6pt; border-radius: 5px; border: solid 1pt #aaaaaa; width: 100%; text-align: center;}
#bigstage{position: absolute; width: 100vw; height: 100vh; top: 0; background: rgba(255, 255, 255, 0.9); display: none;}
#bigstage img{width: 100%; padding: 5%;}
#innerstage img{width: 100%;}
.active{background-color: #ffffff; width: 100%; border: 0; padding: 2pt; margin-bottom: 5pt;}
.menu-inbanner, .menu-inheader, .menu-inlist, .menu-intable, .menu-ingraph, .menu-inss{width: 100%; color: #ffffff; background-color: #999999; border: 0; padding: 2pt; margin-bottom: 5pt; box-shadow: 0 1pt 2pt #555555; transition-duration: 250ms; display: none;}
.header{width: 100%; background-color: #222222; color: #ffffff; padding: 1pt 8pt 1pt 0pt; text-align: right; font-weight: bold;}
.footer{width: 100%; position :absolute; bottom: 0; background-color: #222222; color: #ffffff; padding: 1pt 8pt 1pt 0pt; text-align: right;}
#label{background-color: #ffffff; padding: 0pt 4pt; border-radius: 5px; border: solid 1pt #aaaaaa; width: 100%; color: #000000; text-align: center;}
#resistance{text-align: left;}
JQuery脚本长400行，所以我只需输入问题所在的位置。
$(this) .addClass("active");
应该将按钮的颜色更改为白色。它在主按钮中，但不在子选项卡中。
最后是HTM XXX
<div class="row">
<div class="col-md-12">
<div id="company-logo">
<img src="xxx.png">
</div>
</div>
<div class="col-md-3">
<BR>
<div id="menu-box">
<div><button value="xxx" id="logogo" class="menu">LOGO</button></DIV>
<div><button value="Tab_Banner.PNG" class="menu" id="bannersgo">BANNERS</button></DIV>
<div><button value="Banner.png" class="menu-inbanner" id="bannergo"> Banner</button></DIV>
<div><button value="BITB.PNG" class="menu-inbanner" id="bitbgo"> Banner inside the Body</button></DIV>
<div><button value="Tab_Header.PNG" class="menu" id="headersgo">HEADERS</button></DIV>
<div><button value="Header 1.png" class="menu-inheader" id="header1go"> Header 1</button></DIV>
<div><button value="Header 2.png" class="menu-inheader" id="header2go"> Header 2</button></DIV>
<div><button value="Header 3.png" class="menu-inheader" id="header3go"> Header 3</button></DIV>
<div><button value="Header 4.png" class="menu-inheader" id="header4go"> Header 4</button></DIV>
<div><button value="Header 5.png" class="menu-inheader" id="header5go"> Header 5</button></DIV>
<div><button value="Body Text.png" class="menu" id="bodytextgo">BODY TEXT</button></DIV>
<div><button value="Tab_List.PNG" class="menu" id="listsgo">LISTS</button></DIV>
<div><button value="Bulleted Text.PNG" class="menu-inlist" id="list1go"> List 1</button></DIV>
<div><button value="Ordered Text.PNG" class="menu-inlist" id="list2go"> List 2</button></DIV>
<div><button value="" class="menu-inlist" id="list3go"> List 3</button></DIV>
<div><button value="Tab_Table.PNG" class="menu" id="tablesgo">TABLES </button></DIV>
<div><button value="Table 1.png" class="menu-intable" id="table1go">Table </button></DIV>
<div><button value="Table 2.png" class="menu-intable" id="table2go">Table Text </button></DIV>
<div><button value="Tab_Graph.PNG" class="menu" id="graphsgo">GRAPHS </button></DIV>
<div><button value="Graph.png" class="menu-ingraph" id="graph1go">Graph 1 </button></DIV>
<div><button value="Graph 2.png" class="menu-ingraph" id="graph2go">Graph2</button></DIV>
<div><button value="Recurring Header.png" class="menu" id="hnfgo">HEADERS/FOOTERS AND FOLIO</button></DIV>
<div><button value="Tab_Special Section.PNG" class="menu" id="specialgo">SPECIAL SECTION</button></DIV>
<div><button value="Special Section_BOD.PNG" class="menu-inss" id="ss1go">Special Section 1 </button></DIV>
<div><button value="Special Section_Notice.PNG" class="menu-inss" id="ss2go">Special Section 2</button></DIV>
<div><button value="Special Section_TOC.png" class="menu-inss" id="ss3go">Special Section 3</button></DIV>
<div><button value="" class="menu-inss" id="ss4go">Special Section 4</button></DIV>
<div><button value="" class="menu-inss" id="ss5go">Special Section 5</button></DIV>
</div>
</div>
<div class="col-md-9">
<BR>
<div id="label">
<span id="labeltext">DISCLAIMER</span>
</div><BR>
<div id="stage">
<div id="innerstage">
<div id ="resistance">
<span class="reg">● Strictly follow guidelines set with for the following jobs. </span><BR><BR>
<span class="reg">● Stick to the style guide provided in case of discrepancies in reference/previous output. </span><BR><BR>
<img src="images/Reminder.png" style="width: 60%;">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="bigstage">
</div>
<div class="footer">© xxx</div>
如果可以看到，主按钮工作正常，因为它们在单击时变为白色。虽然子标签在单击后保持不变。我使用了与我在主按钮中使用的相同的东西（即.addClass（“active”））。这真是令人困惑。
我尝试使用.css但它只是弄乱了css hover命令。
欢迎使用其他替代方法。
谢谢！
答案 0 :(得分：3)
使类.active声明成为CSS文件的最后一行，它将起作用。
这里发生的是类.menu-inheader（您在子按钮上使用的类）具有与类.active相同的CSS特性，因此浏览器使用的是最后一个 .css 文件。
有关CSS特异性计算的详细信息，请参阅此MDN Article。
P.S。：尝试始终在问题中包含代码本身以及演示链接。