HTML按钮对JQuery没有反应[关闭]

Question

我创建了一个 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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Banner</button></DIV>
    <div><button value="BITB.PNG" class="menu-inbanner" id="bitbgo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Header 1</button></DIV>
        <div><button value="Header 2.png" class="menu-inheader" id="header2go">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Header 2</button></DIV>
        <div><button value="Header 3.png" class="menu-inheader" id="header3go">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Header 3</button></DIV>
        <div><button value="Header 4.png" class="menu-inheader" id="header4go">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Header 4</button></DIV>
        <div><button value="Header 5.png" class="menu-inheader" id="header5go">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;List 1</button></DIV>
        <div><button value="Ordered Text.PNG" class="menu-inlist" id="list2go">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;List 2</button></DIV>
        <div><button value="" class="menu-inlist" id="list3go">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&#9679;&nbsp;&nbsp;&nbsp;Strictly follow guidelines set with for the following jobs. </span><BR><BR>
<span class="reg">&#9679;&nbsp;&nbsp;&nbsp;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">&copy; xxx</div>

如果您可以看到，主按钮可以正常工作，因为它们在单击时会变成白色。虽然子选项卡在单击后保持不变。我使用了与主按钮中使用的相同的东西（即 .addClass("active")）。这真是令人困惑。

我尝试使用 .css，但它只是弄乱了 css 悬停命令。

欢迎使用其他替代方法来完成这项工作。

谢谢！

Answer 1

将 .active 类声明设为 CSS 文件的最后一行，这样就可以了。

这里发生的事情是.menu-inheader 类（您在子按钮上使用的那个）具有与.active 类相同的 CSS 特异性，因此浏览器使用的是 中声明的最后一个.css 文件。

有关 CSS 特异性计算的更多信息，请参阅MDN Article。

P.S.：尝试始终在问题中包含代码本身以及演示链接。