我不精通 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 东西 [意思是 btncontainer2] 具有不同的颜色背景,我该如何在打开选项卡时实现这一改变? 如果您需要查看我到目前为止的内容,我只担心左侧的选项卡组。如果需要更多信息,请告诉我。 https://glaceontea.tumblr.com/mediatest https://pastebin.com/8wsEjavY
答案 0 :(得分:0)
您是否也在您的网站上使用 JavaScript?这将是为该按钮添加 onClick() 侦听器最简单的方法,使用 getElementsByClassName 找到您的按钮(如果您想使用 getElementByID 更轻松地定位按钮,可以考虑向按钮添加 ID),然后通过 JavaScript 更改 css 属性。
让我知道这是否可行,或者您在实施方面需要帮助
答案 1 :(得分:0)
如果您向所有 tabcontent
类型的 div 元素添加一个公共类,您可以大大简化 javascript 并使其适用于任意数量的选项卡/按钮,并且在注册为外部事件侦听器时不会出现问题。>
这里我使用 .tab
作为公共类名称,以便我可以轻松识别这些选项卡(顺便说一句,这只是识别这些元素的几种方法之一)并为每个使用 {{1} 识别的按钮分配一个事件侦听器}}
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;
}