我不太精通HTML和CSS，但基本上，我有一个带有选项卡的页面。当我单击按钮时，我希望更改配色方案，包括按钮容器的原始背景色。
<div id="container">
<!-- tab buttons -->
<div id="btncontainer">
<button class="buttonnorm tablinks" onclick="openTab(event, 'Tab 1')"
id="defaultOpen">
<span class="chaname">usagi tsukino</span>
<br>
<span class="chasubtitle">sailor moon</span>
</button>
<button class="button2 tablinks" onclick="openTab(event, 'Tab 2')">
<span class="chaname">ami mizuno</span>
<br>
<span class="chasubtitle">sailor moon</span>
</button>
如果我试图用不同的颜色背景创建一个单独的div东西[意思是btncotainer2]，我如何在打开选项卡时实现这一点？如果你需要看看我到目前为止得到了什么，我只担心左边的标签组。如果需要更多信息，请告诉我。https://glaceontea.tumblr.com/mediatesthttps://pastebin.com/8wsEjavY
您的网站上也使用JavaScript吗？这将是最容易为该按钮添加onClick((监听器的方法，用getElementsByClassName找到你的按钮(如果你想用getElementByID更容易定位按钮，也许可以考虑向按钮添加ID(，然后通过JavaScript更改css属性。
让我知道这是否有效，或者你需要帮助实现
如果向所有tabcontent类型的div元素添加一个公共类，则可以极大地简化javascript，并使其适用于任何数量的选项卡/按钮，在注册为外部事件侦听器时不会出现任何问题。
在这里，我使用.tab作为公共className，这样我就可以很容易地识别这些选项卡(这只是识别这些元素的几种方法之一(，并为使用querySelectorAll识别的每个按钮分配一个事件侦听器
document.querySelectorAll('#btncontainer button').forEach( (bttn,index)=>bttn.addEventListener('click',function(e){
let i=index+1;
let expr='Tab '+i;
// hide all elements of class `tab`
let col=document.querySelectorAll('.tab');
col.forEach( n=>n.style.display='none' );
// set current tab as visible block
document.getElementById(expr).style.display='block';
// find and remove active class from all relevant nodes
col=document.querySelectorAll('.tablinks');
col.forEach( n=>n.classList.remove('active') );
// apply background colour to button parent and assign current button as `active`
e.currentTarget.parentNode.className='CUSTOM_BACKGROUND_'+i;
e.currentTarget.classList.add('active');
}));.CUSTOM_BACKGROUND_1{
background:#8494A9!important;
}
.CUSTOM_BACKGROUND_2{
background:#B1F0F9!important;
}
.CUSTOM_BACKGROUND_3{
background:#BAE6C3!important;
}
.CUSTOM_BACKGROUND_4{
background:#ECB1F5!important;
}
.tmblr-iframe {
filter: invert(100%);
-o-filter: invert(100%);
-moz-filter: invert(100%);
-ms-filter: invert(100%);
-webkit-filter: invert(100%);
opacity: 0.2;
position: fixed;
right: 5px;
top: 5px;
transform: scale(0.7,0.7);
transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
-webkit-transform-origin: 100% 0%;
transition: 0.4s;
-o-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-webkit-transition: 0.4s;
white-space: nowrap;
}
.tmblr-iframe:hover {
opacity: 1;
}
/* ----------------------------------------------------------------------- */
/* --------------------------- custom tooltips --------------------------- */
.tippy-tooltip.custom-theme {
background-color: #ee959e;
border-radius: 0;
color: #ffffff;
font-family: inherit;
font-size: inherit;
text-align: center;
}
/* ----------------------------------------------------------------------- */
/* -------------------- custom selection & scrollbar --------------------- */
::-moz-selection {background: #ee959e; color: #ffffff;}
::selection {background: #ee959e; color: #ffffff;}
::-webkit-scrollbar-thumb
{background: #fab1b9; border: 5px solid #ffffff; border-radius: 10px;}
::-webkit-scrollbar-track
{background: #141414; border: 7px solid #ffffff;}
::-webkit-scrollbar
{width: 15px;}
/* ----------------------------------------------------------------------- */
/* ----------------------------- page layout ----------------------------- */
body {
background: #ffffff; /* background color */
color: #141414; /* text color */
font-family: Poppins; /* font */
font-size: 15px; /* font size */
letter-spacing: 0.025em; /* text letter spacing */
line-height: 160%; /* text line height */
text-align: justify; /* text align */
}
#container { /* content container */
height: 620px;
margin: 50px auto;
max-width: 1000px;
width: 90%;
}
/* ----------------------------------------------------------------------- */
/* --------------------------------- tabs -------------------------------- */
#btncontainer { /* button container */
background-color: #fab1b9;
float: left;
height: 100%;
overflow: auto;
width: 200px;
-moz-overflow-style: none;
-ms-overflow-style: none;
-o-overflow-style: none;
}
#btncontainer4 { /* button container 4 */
background-color: #4d8f5f;
float: left;
height: 100%;
overflow: auto;
width: 200px;
-moz-overflow-style: none;
-ms-overflow-style: none;
-o-overflow-style: none;
}
.tabcontent { /* tab container */
background-color: #f6f2fc;
display: none;
float: right;
height: calc(100% - 40px);
height: -moz-calc(100% - 40px);
height: -webkit-calc(100% - 40px);
overflow: none;
padding: 20px;
width: calc(100% - 200px - 40px);
width: -moz-calc(100% - 200px - 40px);
width: -webkit-calc(100% - 200px - 40px);
}
.tabcontent2 { /* tab container 2 */
background-color: #adcdf0;
display: none;
float: right;
height: calc(100% - 40px);
height: -moz-calc(100% - 40px);
height: -webkit-calc(100% - 40px);
overflow: none;
padding: 20px;
width: calc(100% - 200px - 40px);
width: -moz-calc(100% - 200px - 40px);
width: -webkit-calc(100% - 200px - 40px);
}
.tabcontent3 { /* tab container 3 */
background-color: #caadf0;
display: none;
float: right;
height: calc(100% - 40px);
height: -moz-calc(100% - 40px);
height: -webkit-calc(100% - 40px);
overflow: none;
padding: 20px;
width: calc(100% - 200px - 40px);
width: -moz-calc(100% - 200px - 40px);
width: -webkit-calc(100% - 200px - 40px);
}
.tabcontent4 { /* tab container 4*/
background-color: #dcf7e3;
display: none;
float: right;
height: calc(100% - 40px);
height: -moz-calc(100% - 40px);
height: -webkit-calc(100% - 40px);
overflow: none;
padding: 20px;
width: calc(100% - 200px - 40px);
width: -moz-calc(100% - 200px - 40px);
width: -webkit-calc(100% - 200px - 40px);
}
.buttonnorm { /* buttons */
background-color: inherit;
border: none;
color: #ffffff;
cursor: pointer;
display: block;
font-family: inherit;
font-size: inherit;
margin: 0;
outline: none;
padding: 10px 15px;
text-align: justify;
width: 100%;
}
.button2 { /* button 2 */
background-color: inherit;
border: none;
color: #ffffff;
cursor: pointer;
display: block;
font-family: inherit;
font-size: inherit;
margin: 0;
outline: none;
padding: 10px 15px;
text-align: justify;
width: 100%;
}
.button3 { /* button 3 */
background-color: inherit;
border: none;
color: #ffffff;
cursor: pointer;
display: block;
font-family: inherit;
font-size: inherit;
margin: 0;
outline: none;
padding: 10px 15px;
text-align: justify;
width: 100%;
}
.button4 { /* buttons */
background-color: inherit;
border: none;
color: #ffffff;
cursor: pointer;
display: block;
font-family: inherit;
font-size: inherit;
margin: 0;
outline: none;
padding: 10px 15px;
text-align: justify;
width: 100%;
}
/* active button and hover */
.buttonnorm:hover, .buttonnorm.active{
background-color: #ee959e;
}
.button2:hover, .button2.active{
background-color: #6185ab;
}
.button3:hover, .button3.active{
background-color: #8161ab;
}
.button4:hover, .button4.active{
background-color: #7fc993;
}
.buttonnorm::-webkit-scrollbar {display: none;}
.chaname {font-size: 1.2em; text-transform: uppercase;}
.chasubtitle {font-size: 0.9em; font-style: italic; padding-left: 20px;}
/* ----------------------------------------------------------------------- */
/* ------------------------------- content ------------------------------- */
#leftcontent { /* left content in tab */
float: left;
height: calc(100% - 40px);
height: -moz-calc(100% - 40px);
height: -webkit-calc(100% - 40px);
padding: 20px;
width: calc(100% - 250px - 40px - 20px);
width: -moz-calc(100% - 250px - 40px - 20px);
width: -webkit-calc(100% - 250px - 40px - 20px);
}
#linkbox { /* top left link and quote box */
border-bottom: none;
border-radius: 20px;
height: 180px;
margin-left: -20px;
margin-top: 20px;
width: calc(100% + 40px);
width: -moz-calc(100% + 40px);
width: -webkit-calc(100% + 40px);
}
#quote { /* quote box */
background-color: #ffffff;
border-radius: 20px 20px 0px 0px;
height: 65px;
padding: 30px;
text-align: center;
}
#quote i { /* quote icons */
color: #fab1b9;
font-size: 25px;
margin: 0px 10px;
}
#quote2 i { /* quote icons */
color: #3d76b3;
font-size: 25px;
margin: 0px 10px;
}
#links { /* link bar */
background-image: linear-gradient(to bottom right, #fab1b9, #ee959e);
border-radius: 0px 0px 20px 20px;
display: flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
height: 25px;
justify-content: space-between;
padding: 15px;
}
#links2 { /* link bar 2*/
background-image: linear-gradient(to bottom right, #3d76b3, #09407a);
border-radius: 0px 0px 20px 20px;
display: flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
height: 25px;
justify-content: space-between;
padding: 15px;
}
#links a { /* links */
color: #ded9da;
font-size: 19px;
}
#links2 a { /* links2 */
color: #ded9da;
font-size: 19px;
}
#links a:hover { /* links hover */
color: #ff7a95;
transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
}
#links2 a:hover { /* links2 hover */
color: #23384f;
transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
}
#bio { /* bio section */
margin-left: -20px;
margin-top: 20px;
height: calc(100% - 220px);
height: -moz-calc(100% - 220px);
height: -webkit-calc(100% - 220px);
overflow: auto;
width: calc(100% + 40px);
width: -moz-calc(100% + 40px);
width: -webkit-calc(100% + 40px);
-moz-overflow-style: none;
-ms-overflow-style: none;
-o-overflow-style: none;
}
/* gives links in bio section a bottom border */
#bio a {border-bottom: 3px solid #fab1b9;}
#bio a:hover {border-bottom: 3px solid #ee959e;}
#facts { /* right bottom info */
height: calc(100% - 270px);
height: -moz-calc(100% - 270px);
height: -webkit-calc(100% - 270px);
line-height: 139%;
margin-top: 20px;
overflow: none;
}
img:hover {cursor: cell;}
img {border-radius: 20px; width: 250px;}
#bio::-webkit-scrollbar {display: none;}
.answer {float: right; margin-left: 7px;}
#rightcontent {float: right; height: 100%; width: 250px;}
.prompt {background-color: #ee959e; border-radius: 10px; padding: 5px 8px;}
/* ----------------------------------------------------------------------- */
/* -------------------------------- text --------------------------------- */
h1 { /* character name */
font-size: 2.2em;
font-weight: normal;
overflow-x: scroll;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
-moz-overflow-style: none;
-ms-overflow-style: none;
-o-overflow-style: none;
}
a {
color: #fab1b9; /* link color */
text-decoration: none;
}
a2 {
color: #3d76b3; /* link2 color */
text-decoration: none;
}
a:hover {
color: #ee959e; /* link hover color */
}
a2:hover {
color: #09107a; /* link2 hover color */
}
.firstword {color: #ee959e;}
h1::-webkit-scrollbar {display: none;}
/* ----------------------------------------------------------------------- */
/* ---------------------------- transitions ------------------------------ */
a, a:hover, a2, a2:hover #credit, #credit:hover, button, button:hover, button4, button4:hover{
transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
}
/* ----------------------------------------------------------------------- */
/* ----------------------------- responsive ------------------------------ */
@media only screen and (max-width: 900px){
#quote {height: 95px;}
#linkbox {height: 210px;}
#bio {
height: calc(100% - 270px);
height: -moz-calc(100% - 270px);
height: -webkit-calc(100% - 270px);
}
}
@media only screen and (max-width: 800px){
#quote {height: 65px;}
#linkbox {height: 180px;}
#rightcontent {margin-top: 20px;}
.tabcontent::-webkit-scrollbar {display: none;}
#leftcontent, #rightcontent {float: none; width: calc(100% - 40px);}
.tabcontent {
overflow: auto;
-moz-overflow-style: none;
-ms-overflow-style: none;
-o-overflow-style: none;
}
.tabcontent2 {
overflow: auto;
-moz-overflow-style: none;
-ms-overflow-style: none;
-o-overflow-style: none;
}
.tabcontent3 {
overflow: auto;
-moz-overflow-style: none;
-ms-overflow-style: none;
-o-overflow-style: none;
}
.tabcontent4 {
overflow: auto;
-moz-overflow-style: none;
-ms-overflow-style: none;
-o-overflow-style: none;
}
#bio {
height: calc(100% - 220px);
height: -moz-calc(100% - 220px);
height: -webkit-calc(100% - 220px);
}
img {
width: calc(100% + 40px);
width: -moz-calc(100% + 40px);
width: -webkit-calc(100% + 40px);
}
}
/* ----------------------------------------------------------------------- */
/* ------------------------------- credits ------------------------------- */
#credit {
background-color: #ffffff;
color: #fab1b9;
bottom: 0;
font-size: 20px;
font-style: italic;
margin: 10px;
padding: 10px 0px;
position: fixed;
right: 0;
text-align: center;
width: 40px;
}
#credit:hover {
background-color: #fab1b9;
color: #ffffff;
}<div id="btncontainer">
<button class="buttonnorm tablinks active" id="defaultOpen">
<span class="chaname">usagi tsukino</span><br>
<span class="chasubtitle">sailor moon</span>
</button>
<button class="button2 tablinks">
<span class="chaname">ami mizuno</span><br>
<span class="chasubtitle">sailor moon</span>
</button>
<button class="button3 tablinks">
<span class="chaname">rei hino</span><br>
<span class="chasubtitle">sailor moon</span>
</button>
<button class="button4 tablinks">
<span class="chaname">makoto kino</span><br>
<span class="chasubtitle">sailor moon</span>
</button>
</div>
<div id="Tab 1" class="tab tabcontent" style="display: block;">
<div id="leftcontent">
<h1><span class="firstword">usagi</span> tsukino</h1>
<div id="linkbox">
<div id="quote"><i class="fas fa-quote-left" aria-hidden="true"></i>
girls have to be strong to protect the men they love
<i class="fas fa-quote-right" aria-hidden="true"></i>
</div>
<div id="links"><a href=""><i class="fas fa-hat-cowboy" aria-hidden="true"></i></a><a href=""><i class="fas fa-tools" aria-hidden="true"></i></a><a href=""><i class="fas fa-radiation" aria-hidden="true"></i></a><a href=""><i class="fas fa-skull-crossbones" aria-hidden="true"></i></a><a href=""><i class="fas fa-crow" aria-hidden="true"></i></a><a href=""><i class="fas fa-hammer" aria-hidden="true"></i></a></div>
</div>
<div id="bio">
</div>
</div>
<div id="rightcontent"><img src="https://64.media.tumblr.com/0ebf1e3381365b16b33d25bdecbf117b/8f55519f8fad3e4e-10/s250x400/580220f8f5fee91b0309d40472ab09c4d1891196.png"><!-- facts -->
<div id="facts"><span class="prompt">senshi name</span><span class="answer">sailor moon</span><br><br><span class="prompt">age</span><span class="answer">14</span><br><br><span class="prompt">gender</span><span class="answer">female</span><br><br><span class="prompt">sexuality</span><span class="answer">bisexual</span><br><br><span class="prompt">alignment</span><span class="answer">chaotic good</span><br><br><span class="prompt">zodiac</span><span class="answer">cancer</span><br><br><span class="prompt">birthday</span><span class="answer">june 30</span><br><br><span class="prompt">height</span><span class="answer">1.5 m</span></div>
</div>
</div>
<div id="Tab 2" class="tab tabcontent2" style="display: none;">
<div id="leftcontent">
<h1><span class="firstword">ami</span> mizuno</h1>
<div id="linkbox2">
<div id="quote2"><i class="fas fa-quote-left" aria-hidden="true"></i>
be pure, be honest, be beautiful
<i class="fas fa-quote-right" aria-hidden="true"></i>
</div>
<div id="links2"><a href=""><i class="fas fa-tree" aria-hidden="true"></i></a><a href=""><i class="fas fa-water" aria-hidden="true"></i></a><a href=""><i class="fas fa-leaf" aria-hidden="true"></i></a><a href=""><i class="fas fa-cloud" aria-hidden="true"></i></a><a href=""><i class="fas fa-seedling" aria-hidden="true"></i></a><a href=""><i class="fas fa-snowflake" aria-hidden="true"></i></a></div>
</div>
<div id="bio">
</div>
</div>
<div id="rightcontent2"><img src="https://64.media.tumblr.com/50fea5f245734d1fc1f5b85a67f09894/tumblr_psusqs3NH31u4buxw_250.jpg"><!-- facts -->
<div id="facts2"><span class="prompt">senshi name</span><span class="answer">sailor mercury</span><br><br><span class="prompt">age</span><span class="answer">14</span><br><br><span class="prompt">gender</span><span class="answer">female</span><br><br><span class="prompt">sexuality</span><span class="answer">asexual</span><br><br><span class="prompt">alignment</span><span class="answer">lawful neutral</span><br><br><span class="prompt">zodiac</span><span class="answer">virgo</span><br><br><span class="prompt">birthday</span><span class="answer">september 10</span><br><br><span class="prompt">height</span><span class="answer">1.57 m</span></div>
</div>
</div>
<div id="Tab 3" class="tab tabcontent3" style="display: none;">
<div id="leftcontent">
<h1><span class="firstword">rei</span> hino</h1>
<div id="linkbox">
<div id="quote"><i class="fas fa-quote-left" aria-hidden="true"></i>
i shall punish those who steal pure hearts to destroy innocent lives with the fire of mars
<i class="fas fa-quote-right" aria-hidden="true"></i>
</div>
<div id="links"><a href=""><i class="fas fa-star" aria-hidden="true"></i></a><a href=""><i class="fas fa-moon" aria-hidden="true"></i></a><a href=""><i class="fas fa-sun" aria-hidden="true"></i></a><a href=""><i class="fas fa-rocket" aria-hidden="true"></i></a><a href=""><i class="fas fa-meteor" aria-hidden="true"></i></a><a href=""><i class="fas fa-space-shuttle" aria-hidden="true"></i></a></div>
</div>
<div id="bio">
</div>
</div>
<div id="rightcontent"><img src="https://64.media.tumblr.com/ac674f03dc750c712230e83ec85ba5cf/d98316f0f765c3e8-41/s250x400/7e0c373b6010f073801ccb83b78a4e2095d11a73.png"><!-- facts -->
<div id="facts"><span class="prompt">senshi name</span><span class="answer">sailor mars</span><br><br><span class="prompt">age</span><span class="answer">14</span><br><br><span class="prompt">gender</span><span class="answer">female</span><br><br><span class="prompt">sexuality</span><span class="answer">heterosexual</span><br><br><span class="prompt">alignment</span><span class="answer">true neutral</span><br><br><span class="prompt">zodiac</span><span class="answer">aries</span><br><br><span class="prompt">birthday</span><span class="answer">april 17</span><br><br><span class="prompt">height</span><span class="answer">1.6 m</span></div>
</div>
</div>
<div id="Tab 4" class="tab tabcontent4" style="display: none;">
<div id="leftcontent">
<h1><span class="firstword">makoto</span> kino</h1>
<div id="linkbox">
<div id="quote"><i class="fas fa-quote-left" aria-hidden="true"></i>
how dare you destroy my precious lunch box! | I'll make you feel regret, it'll leave you numb!
<i class="fas fa-quote-right" aria-hidden="true"></i>
</div>
<div id="links"><a href=""><i class="fas fa-tree" aria-hidden="true"></i></a><a href=""><i class="fas fa-water" aria-hidden="true"></i></a><a href=""><i class="fas fa-leaf" aria-hidden="true"></i></a><a href=""><i class="fas fa-cloud" aria-hidden="true"></i></a><a href=""><i class="fas fa-seedling" aria-hidden="true"></i></a><a href=""><i class="fas fa-snowflake" aria-hidden="true"></i></a></div>
</div>
<div id="bio">
</div>
</div>
<div id="rightcontent"><img src="https://64.media.tumblr.com/34352616dab51ba5003b7d0029dc21e8/be1a62031dc1914e-e0/s250x400/48eae314a8f879e29f6ab106c921499c045b24c6.png"><!-- facts -->
<div id="facts"><span class="prompt">senshi name</span><span class="answer">sailor jupiter</span><br><br><span class="prompt">age</span><span class="answer">14</span><br><br><span class="prompt">gender</span><span class="answer">female</span><br><br><span class="prompt">sexuality</span><span class="answer">pansexual</span><br><br><span class="prompt">alignment</span><span class="answer">lawful good</span><br><br><span class="prompt">zodiac</span><span class="answer">sagittarius</span><br><br><span class="prompt">birthday</span><span class="answer">december 5</span><br><br><span class="prompt">height</span><span class="answer">1.67 m</span></div>
</div>
</div>