处于活动状态的选定选项卡以及框内的文本都应该发生变化，但是没有变化，我不知道为什么。 我做了一个小提琴，以显示到目前为止我所做的事情：
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
// This what happens when clicked on the FIRST button
function click1() {
btn1.classList.add("search-tab selected"); // give the selected class
btn2.classList.remove("search-tab selected"); // take away the selected class
}
// This what happens when clicked on the SECOND button
function click2() {
btn2.classList.add("search-tab selected"); // give the selected class
btn1.classList.remove("search-tab selected"); // take away the selected class
}/*! CSS Used from: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css */
header,nav{display:block;}
a{background-color:transparent;}
a:active,a:hover{outline:0;}
img{border:0;}
input{margin:0;font:inherit;color:inherit;}
input[type=submit]{-webkit-appearance:button;cursor:pointer;}
input::-moz-focus-inner{padding:0;border:0;}
input{line-height:normal;}
@media print{
*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important;}
a,a:visited{text-decoration:underline;}
a[href]:after{content:" (" attr(href) ")";}
img{page-break-inside:avoid;}
img{max-width:100%!important;}
h2,p{orphans:3;widows:3;}
h2{page-break-after:avoid;}
}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
input{font-family:inherit;font-size:inherit;line-height:inherit;}
a{color:#337ab7;text-decoration:none;}
a:focus,a:hover{color:#23527c;text-decoration:underline;}
a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
img{vertical-align:middle;}
h2{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}
h2{margin-top:20px;margin-bottom:10px;}
h2{font-size:30px;}
p{margin:0 0 10px;}
ul{margin-top:0;margin-bottom:10px;}
ul ul{margin-bottom:0;}
.row{margin-right:-15px;margin-left:-15px;}
.col-md-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px;}
@media (min-width:992px){
.col-md-12{float:left;}
.col-md-12{width:100%;}
}
.clearfix:after,.clearfix:before,.row:after,.row:before{display:table;content:" ";}
.clearfix:after,.row:after{clear:both;}
img{border:0;}
.amh-content:after{content:"";display:table;clear:both;}
#header{margin-left:auto;margin-right:auto;clear:both;}
#header{background-position:center;min-height:100px;}
@media (max-width: 992px){
img{max-width:100%!important;height:auto!important;}
}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.amh-row{margin:0 auto;padding:0;}
.amh-block{padding:0;margin:0;}
.amh-content{margin-left:auto;margin-right:auto;}
@media (max-width: 767px){
div.amh-row > div.amh-block > div.amh-content{margin-left:auto!important;margin-right:auto!important;}
}
a{text-decoration:none;}
a:hover{text-decoration:none;}
a{font-weight:normal;}
#header>.amh-row{max-width:988px;}
#header>.amh-row>.amh-block>.amh-content{max-width:988px;}
a{color:#00b0b0;}
a:hover{color:#00d6d6;}
h2{color:#377275;padding-bottom:2px;padding-top:2px;margin-bottom:0px;margin-top:0px;line-height:1.3;}
h2{padding-bottom:5px;padding-top:5px;margin-bottom:0px;margin-top:0px;}
h2{font-weight:bold;font-size:2.667em;}
#siteMenu > h2 > img{float:right;}
#search-box > div.search-tab-content{padding:12px!important;}
div,form{margin:0;padding:0;border:0;vertical-align:baseline;}
input[type=submit]{background-color:#4f2683;color:#fff;border:0;padding:6px;cursor:pointer;}
@media handheld, screen and (min-width: 620px){
#mobile-search{display:none;}
}
input[type="submit"]:hover{background:#807f83;color:#eee;}
@media handheld, screen and (max-width: 619px){
#mobile-search{margin-left:5px;position:relative;display:block;}
#mobile-search div{margin-bottom:10px;}
#mobile-search-field{display:inline-block;vertical-align:middle;width:70%;border-radius:0px!important;margin:0;font-size:24px;padding:8px 0 8px 8px;border:solid 5px #c9c9c9;line-height:24px;box-sizing:border-box;}
input[type="text"],input[type="submit"]{-webkit-appearance:none;border-radius:0;}
#mobile-search-submit{width:28%;height:100%;margin:0;vertical-align:middle;display:inline-block;line-height:42px;text-indent:-9999px;background-image:url("");background-repeat:no-repeat;background-position:center;}
}
div,a,img,nav{margin:0;padding:0;border:0;vertical-align:baseline;}
nav{display:block;}
h2{padding:0;margin:0 0 10px 0;font-size:24px;font-weight:bold;color:#323232;}
a,a:visited{color:#4f2683;text-decoration:none;}
a:active,a:hover{text-decoration:underline;}
ul{margin-bottom:20px;margin-top:-5px;}
ul ul{margin:0;}
a{font-weight:700;}
@media handheld, screen and (min-width: 620px){
#menuContainer ul{list-style:none;}
#menuContainer{float:left;max-width:821px;width:100%;margin:0;padding-top:20px;margin-bottom:-20px;}
#siteMenu .mobileTitle{display:none;}
#siteMenu{height:60px;position:relative;list-style:none;font-size:14px;z-index:6000;box-shadow:none;margin:0;padding:0 0 0 10px;}
.dropDownMenu{position:relative;z-index:999;list-style:none;margin:0;padding:0;}
.dropDownMenu > li > a{display:block;overflow:hidden;position:relative;text-indent:0;color:#000;text-align:center;text-decoration:none;background:0;border:0 none;height:auto;padding:15px 0;font-weight:400;}
.dropDownMenu ul{list-style-type:none;float:left;position:relative;z-index:9999;margin:0;padding:0;}
ul.menuColumn{border-left:none;border-right:none;}
ul.menuColumn:first-child{border:0;}
.widthcontainer2col ul.menuColumn{width:45%;padding:0 10px;}
.dropDownMenu ul.menuColumn a{text-decoration:none;display:block;letter-spacing:1px;color:#363636;font-size:13px;line-height:115%;margin:6px 0;}
.dropDownMenu li.menuLevel1{font-weight:700;letter-spacing:0;font-size:12px;line-height:16px;color:#4f2683;margin:5px 0;}
.dropDownMenu li.menuLevel2 > a{font-weight:400;}
.dropDownMenu ul a:hover{text-decoration:underline;}
.dropDownMenu ul.menuLevel1{float:none;}
.dropDownMenu .menuContainer{position:absolute;display:none;box-shadow:0 4px 4px rgba(0,0,0,0.4);-webkit-box-shadow:0 4px 4px rgba(0,0,0,0.4);border:1px solid #4f2683;background:#fff;z-index:9999;top:47px;padding:0;}
.dropDownMenu .innerContainer{float:left;width:100%;position:relative;z-index:99;}
.dropDownMenu .widthcontainer2col{width:50%;}
ul.dropDownMenu li:hover .menuContainer{display:block!important;}
ul.dropDownMenu li{float:left;cursor:pointer;}
ul.dropDownMenu li li{float:none;}
.widthcontainer2col{top:30px;z-index:999;}
.widthcontainer2col .innerContainer:before{position:absolute;content:"";z-index:-1;width:53%;top:12px;bottom:14px;right:0;border-left:1px solid #b9b9b9;}
.dropDownMenu>li:hover>a{position:relative;text-decoration:none;font-weight:700;background:#4f2683;color:#fff;}
#dropDownRootItem2{width:19.970631424376%;max-width:136px;}
#dropDownRootItem2:hover>a{background-position:center -21px;}
#dropDownRootItem3:hover>a{background-position:center -63px;}
#dropDownRootItem4{width:15.418502202643%;max-width:105px;}
#dropDownRootItem4:hover>a{background-position:center -105px;}
#dropDownRootItem5{width:16.446402349486%;max-width:90px;}
#dropDownRootItem5:hover>a{background-position:center -147px;}
#dropDownRootItem7 .widthcontainer2col{right:0;}
#dropDownRootItem1,#dropDownRootItem3{width:17.033773861968%;max-width:116px;}
#dropDownRootItem6,#dropDownRootItem7{width:16.096916299559%;max-width:124px;}
#dropDownRootItem7{width:16.096916299559%;max-width:124px;}
#dropDownRootItem6:hover>a,#dropDownRootItem7:hover>a{background-position:center -189px;}
#dropDownRootItem5,#dropDownRootItem6,#dropDownRootItem7{position:relative;}
#dropDownRootItem5 .widthcontainer2col,#dropDownRootItem6 .widthcontainer2col,#dropDownRootItem7 .widthcontainer2col{width:440px;}
.widthcontainer2col .innerContainer:before{position:relative;border-left:none;}
.innerContainer>.menuColumn:nth-child(1){width:100%;box-sizing:border-box;}
.dropDownMenu .widthcontainer2col{width:auto;}
#dropDownRootItem5 .widthcontainer2col,#dropDownRootItem6 .widthcontainer2col,#dropDownRootItem7 .widthcontainer2col{width:250px;}
.dropDownMenu .menuLevel2{padding:3px 0;}
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix{display:inline-block;}
}
@media screen and (max-width: 840px){
#dropDownRootItem1{width:17%;}
#dropDownRootItem2{width:16%;}
#dropDownRootItem3{width:14%;}
#dropDownRootItem4{width:13%;}
#dropDownRootItem5{width:12%;}
#dropDownRootItem6{width:10%;}
#dropDownRootItem7{width:10%;}
}
@media screen and (max-width: 740px){
#dropDownRootItem1,#dropDownRootItem2,#dropDownRootItem3,#dropDownRootItem4,#dropDownRootItem5,#dropDownRootItem6,#dropDownRootItem7{font-size:12px;}
}
@media handheld, screen and (max-width: 619px){
#siteMenu{display:block;}
#siteMenu .mobileTitle{display:block;padding:15px;padding-left:30px;background-color:#4f2683;color:#fff;box-sizing:border-box;cursor:pointer;}
#siteMenu>ul{list-style-type:none;width:89.5%;padding:0;margin:0 auto;margin-bottom:10px;box-sizing:border-box;transition:all .5s ease;}
#siteMenu>ul ul{padding:0;list-style:none;}
#siteMenu a,#siteMenu li{margin:0;padding:15px 10px;color:#fff;}
#siteMenu .dropDownMenu>li{width:100%!important;box-sizing:border-box;padding:5px 0;cursor:pointer;}
.dropDownMenu>li>a{font-size:24px;background-color:#4f2683;display:block;margin:10px;pointer-events:none;}
.dropDownMenu>li>.menuContainer{font-size:16px;width:100%;height:100%;}
.dropDownMenu>li>.menuContainer>.innerContainer{opacity:.75;}
#siteMenu .menuColumn>li{padding:0;background-color:#fff;color:#4f2683;}
#siteMenu .menuColumn li a{color:#4f2683;}
#siteMenu li.menuLevel2{padding-left:0;}
#siteMenu .menuColumn>li>ul{padding:0;}
#siteMenu .menuColumn>li>ul>li{padding-left:0;margin:2px;}
#siteMenu .menuLevel2{padding:15px;}
}
@media print{
#siteMenu{display:none;}
h2{color:#000;font-size:25px;}
img{border:none;}
}
div,a,form,header{margin:0;padding:0;border:0;vertical-align:baseline;}
header{display:block;}
a,a:visited{color:#4f2683;text-decoration:none;}
a:active,a:hover{text-decoration:underline;}
a{font-weight:700;}
#search-box a{font-weight:400;}
@media handheld, screen and (min-width: 620px){
.mobileOnly{display:none!important;}
#siteHeader{width:98%;margin:0 auto;max-width:1200px;}
#siteHeader{background:url() no-repeat scroll 2% 20px transparent;height:130px;position:relative;top:-10px;left:0px;}
#siteHeader > a{float:left;display:block;width:33.33%;height:26px;line-height:26px;font-weight:bold;text-decoration:none;color:#fff;text-align:center;font-size:110%;}
a#logoLink{display:block;text-indent:-4000px;background-image:none;height:130px;width:222px;display:block;z-index:1;}
.search-tab,.search-tab-link{display:inline;color:#fff;background-color:#7bc143;text-decoration:none;padding:8px;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.search-tab:hover{background-color:#807f83;}
.search-tab.selected{color:#fff;background-color:#4f2683;}
.search-tab-link{background-color:#009ddc;}
#search-box{position:relative;min-height:100px;clear:both;margin:-71px 0 0;float:right;display:block;z-index:999;padding:0;}
#search-box .search-bar{background:#fff;height:24px;border-bottom:1px solid #807f83;border-left:1px solid #807f83;border-top:1px solid #807f83;}
#search-box input{float:left;margin:0;}
#search-box input:focus{outline:none;}
#search-box #search-text-icon{float:left;width:auto;height:auto;position:absolute;right:0;margin:-1px 15px 0 0;cursor:pointer;}
#search-box #search-text{height:23px;width:75%;border:0;font-size:13px;line-height:23px;font-family:Helvetica, Arial, sans-serif;background:transparent;color:#000;margin:0;padding:0 0 0 11px;}
.search-tab-content{background-color:#4f2683;padding:15px;margin-top:8px;}
#search-old-catalog{text-align:left;}
}
@media screen and (min-width: 1040px){
#search-box{top:40px;}
}
@media handheld, screen and (max-width: 619px){
#siteMenu{font-family:'Century Gothic', CenturyGothic, AppleGothic, Helvetica, sans-serif!important;}
#search-box{display:none;}
#siteHeader>a{background:#4f2683;}
#siteHeader>a{float:left;display:block;width:33.33%;height:26px;line-height:26px;font-weight:bold;text-decoration:none;color:#fff;text-align:center;font-size:80%;}
#mobileLogo{background:transparent url() 0 bottom no-repeat;clear:both;height:133px;margin-bottom:50px;background-position:center;}
.mobileOnly{display:block;}
input[type="text"]{-webkit-appearance:none;border-radius:0;}
}
@media print{
.mobileOnly,#siteHeader{display:none;}
}
div,a,img{margin:0;padding:0;border:0;vertical-align:baseline;}
a,a:visited{color:#4f2683;text-decoration:none;}
a:active,a:hover{text-decoration:underline;}
a{font-weight:700;}
@media print{
img{border:none;}
}<header id="siteHeader"><a id="logoLink" href="">Home</a> <a id="mobileLink" href="" class="mobileOnly">Hours</a> <a id="mobileLink" href="" class="mobileOnly">Catalog</a>
<div id="mobileLogo"><form id="search-box" action="">
<div onclick="click1()" id="btn1" class="search-tab selected" data-search-type="catalog">Catalog</div>
<div onclick="click2()" id="btn2"class="search-tab" data-search-type="website">Website</div>
<div class="search-tab-link">Login</div>
<div class="search-tab-content">
<div class="search-bar">
<input type="text" id="search-text" placeholder="Search Catalog" name="qu"><input type="image" alt="go" id="search-text-icon" title="Search" src="">
</div>
</div>
<div id="search-old-catalog"><a href="" target="_blank" rel="noopener">Old Catalog</a></div>
</form></div>
</header>
答案 0 :(得分：3)
classList.add和classList.remove是可变参数方法。要使用它们，请将您的类作为单独的字符串传递，而不是使用单个空格分隔的字符串。
btn1.classList.add("search-tab selected");
成为
btn1.classList.add('search-tab', 'selected');
顺便说一句，如果您遵循@ j08691的建议（读取控制台错误），它将告诉您出了什么问题。读取错误是一种好习惯。