如何在单击时更改非活动选项卡颜色背景

编程问答 2022-04-22

问题描述

我不精通 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

解决方法

您是否也在您的网站上使用 JavaScript？这将是为该按钮添加 onClick() 侦听器最简单的方法，使用 getElementsByClassName 找到您的按钮（如果您想使用 getElementByID 更轻松地定位按钮，可以考虑向按钮添加 ID），然后通过 JavaScript 更改 css 属性。

让我知道这是否可行，或者您在实施方面需要帮助

,

如果您向所有 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;
}

htmltumblr

相关问答

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其...
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。...
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbc...