【问题标题】:How to give pre-selected tab and selected tabs a different background colour?如何为预选选项卡和选定选项卡提供不同的背景颜色?
【发布时间】:2018-04-16 07:00:00
【问题描述】:

我正在处理的页面显示四个选项卡。我有两个问题:

问题 1:使用资源管理器查看页面时,选定的选项卡(通过 CSS 焦点)显示黑色背景。但是,当使用 Edge 查看页面时,这似乎不起作用。我需要改变什么?

问题 2:最初(使用资源管理器)预选选项卡(即第一个选项卡)不显示此黑色背景。此黑色背景仅在单击其中一个选项卡后出现,但在重新加载页面后不会出现。我需要进行哪些更改才能让预先选择的选项卡在页面重新加载后立即显示黑色背景?

请在下方找到相关代码

<style>
#tab1, #tab2, #tab3, #tab4 {
  float: left;
  padding: 5px 10px 5px 10px;
  background: #B00098;
  color: #FFFFFF;
  margin: 0px 5px 0px 5px;
}

#tab1:hover, #tab2:hover, #tab3:hover, #tab4:hover {
  background: #E800C9;
}

#tab1:focus, #tab2:focus, #tab3:focus, #tab4:focus {
  background: #333333;
}

#tab1Content, #tab2Content, #tab3Content, #tab4Content {
  width: 100%;
  height: 500px;
  padding: 20px;
  border: 1px solid #B00098;
}

#tab1Content {
 display: block; 
}

#tab2Content, #tab3Content, #tab4Content {
 display: none; 
}

#tab2Content, #tab3Content, #tab4Content {
 display: none; 
}

.tops {
   vertical-align: top;
}

.text {
   text-align: justify;
   padding-right: 10px;
   width: 80%
}


img {
   padding-right: 5px;
   margin-top: -20px;
}


</style>



<script>
function selectTab(tabIndex) {
  //Hide All Tabs
  document.getElementById('tab1Content').style.display="none";
  document.getElementById('tab2Content').style.display="none";
  document.getElementById('tab3Content').style.display="none";
  document.getElementById('tab4Content').style.display="none";

  //Show the Selected Tab
  document.getElementById('tab' + tabIndex + 'Content').style.display="block";  
}

</script>





<div id="tab1" onClick="JavaScript:selectTab(1);">Boek 1</div>
<div id="tab2" onClick="JavaScript:selectTab(2);">Boek 2</div>
<div id="tab3" onClick="JavaScript:selectTab(3);">Boek 3</div>
<div id="tab4" onClick="JavaScript:selectTab(4);">Boek 4</div>

<br/>

<div id="tab1Content">
<table><tr><td class="text">
<b>Identiteit – Paul Verhaeghe</b><br>
Maatschappelijke veranderingen hebben gezorgd voor een veranderd ik-gevoel. Paul Verhaeghe onderzoekt de effecten van dertig jaar neoliberalisme, vrijemarktwerking, privatisering en de relatie tussen de maakbare samenleving en onze identiteit. Wie wij zijn wordt zoals altijd bepaald door de context waarin wij leven. Die context bepaalt op dit moment: Wie geen succes heeft zal ziek zijn.<br><br>

De dwang tot succes en geluk blijkt een keerzijde te hebben: het leidt tot verlies aan zelfbesef, tot desoriëntatie en vertwijfeling. De mens is eenzamer dan ooit. De liefde is moeilijk te bereiken en betekenisvol leven is diepgaand problematisch geworden. Vanuit zijn klinische ervaring als psychotherapeut laat Verhaeghe zien hoezeer de veranderde maatschappij doorwerkt in de hedendaagse individuele psychische problemen. Mensen komen met andere psychische klachten bij de psychiater dan voorheen.<br><br>

<b>Over de auteur</b><br>
Paul Verhaeghe (geb. 5 november 1955) is van opleiding klinisch psycholoog, van vorming psychoanalyticus. Zijn eerste doctoraat (1985) handelde over hysterie, zijn tweede (1992) over psychodiagnostiek. Hij werkt als gewoon hoogleraar aan de universiteit van Gent. Sedert 2000 gaat zijn belangstelling vooral naar de invloed van maatschappelijke veranderingen op psychologische en psychiatrische moeilijkheden. 
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_1.jpg" style="float: left; width: 120%; ">
</td></table>
</div>

<div id="tab2Content">
<table><tr><td class="text">
<b>Get your guts, je instinct als kompas – Hilde Bolt</b><br>
Iemand met Guts is een persoon met lef, met ballen. Maar heeft lef te maken met de darmen ('gut' = 'darm'), met onze buik? Een heleboel. Ons buikgebied bevat veel meer wijsheid dan we denken. Guts heeft een dubbele betekenis: de signalen uit het buikgebied zijn het instrument, het kompas van waaruit je kunt leven. En Guts is de kracht die je nodig hebt om hiernaar te handelen. Het leven kan mooi, maar ook vol risico's en soms wreed zijn. We kunnen niet altijd kiezen wat onze weg kruist. Toch is het vaak mogelijk om lichter, speelser, creatiever en eenvoudiger met het leven om te gaan.<br><br>

Get your Guts is een wake-up call, een herinnering aan je eigen oorsprong. De wijsheid van je lichaam, je buikgebied geeft je de mogelijkheid om oeroude instinctieve en verborgen kennis weer tot leven te brengen. Get your Guts is een boek voor mensen die zelf guts willen ontwikkelen, maar ook een boek dat iedere therapeut, coach of hulpverlener gelezen moet hebben.
<br><br>
<b>Over de auteur</b><br>
Hilde Bolt werkt als zelfstandig gevestigd coach, counselor, trainer en psychotherapeut. Ze heeft zich bijgeschoold in oosterse en westerse vormen van lichaamsgericht werken. Tijdens de trainingen creëert ze een veilige, creativiteit bevorderende sfeer waarin veel ‘op maat’ geëxperimenteerd kan worden zodat een ieder op een eigen manier het optimale rendement uit de training kan halen.
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_2.jpg" style="float: left; width: 120%; ">
</td></table>
</div>

<div id="tab3Content">
<table><tr><td class="text">
<b>Zin kun je maken - Ilse Vooren en Merlijn Koch</b><br>
Vanaf nu is zingeving begrijpelijk en hanteerbaar. Zin kun je maken benadert zingeving als een vermogen, waarbinnen vaardigheden en competenties te ontwikkelen zijn. We hebben meer ruimte dan ooit om stil te staan bij de betekenis van onszelf en ons bestaan. Zingeving speelt in onze diepste lagen en vragen en werkt door in het alledaagse leven. Wanneer en hoe ervaar je zin? Dit boek maakt helder hoe zingevingsprocessen werken en wat de functie van zingeving is.<br><br>
Zingeving hanteerbaar maken is belangrijk om richting te geven aan leven en werk. Voor coaches, leidinggevenden en andere professionals is praktische kennis van zingeving tegenwoordig essentieel. Het gesprek kunnen voeren op het niveau van betekenis is onderdeel van het nieuwe organiseren, leidinggeven en de zelfsturing van professionals.
Dit boek geeft concrete handvatten om processen van zingeving te begeleiden, individueel en in organisaties. Je ontdekt hoe je kunt bijdragen aan ervaringen van zin in alle verschijningsvormen, zoals motivatie, betrokkenheid, voldoening, (eigen)waarde en betekenis.<br><br>
<b>Over de auteurs</b><br>
Ilse Vooren en Merlijn Koch zijn beiden humanisticus. Ilse is oprichter van Food for Flow en gespecialiseerd in zingeving, energie en performance. Merlijn is coach en trainer bij de landelijke coachorganisatie Resilians, met expertise in het vergroten van vitaliteit en veerkracht.
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_3.jpg" style="float: left; width: 120%; ">
</td></table>
</div>


<div id="tab4Content">
<table><tr><td class="text">
<b>Mentaliserend Coachen – Peter Bleumer en René Meijer</b><br>
Mentaliseren is het vermogen tot zelfreflectie en inleving, beide noodzakelijk om goed te functioneren op het werk en privé. Sommige mensen kunnen niet goed mentaliseren, en veel mensen die dit vermogen wel hebben, verliezen het als ze stress ervaren of emotioneel zijn.<br><br>

Voor effectieve coaching en training is zelfreflectie van de deelnemers essentieel. Wat nu te doen als juist in dat gebrek aan mentaliserend vermogen het probleem schuilt? Dit praktische boek laat zien hoe mensen kunnen leren beter te mentaliseren. Het bevat concrete handvatten voor coaches, trainers en leidinggevenden voor het bevorderen hiervan.
<br><br>
<b>Over de auteurs</b><br>
Ilse Vooren en Merlijn Koch zijn beiden humanisticus. Ilse is oprichter van Food for Flow en gespecialiseerd in zingeving, energie en performance. Merlijn is coach en trainer bij de landelijke coachorganisatie Resilians, met expertise in het vergroten van vitaliteit en veerkracht.
</td>
<td class="tops">
<img src="http://www.alumnei.nl/images/boekenactie_2017/boek_4.jpg" style="float: left; width: 120%; ">
</td></table>
</div>

【问题讨论】:

    标签: html css tabs


    【解决方案1】:

    感谢 mtr.web,我设法解决了这个问题。我已将他/她的建议整合到代码中。

    请在下面找到完整的工作代码!

    <style>
    #tab1, #tab2, #tab3, #tab4 {
      float: left;
      padding: 5px 10px 5px 10px;
      background: #B00098;
      color: #FFFFFF;
      margin: 0px 5px 0px 5px;
    }
    
    #tab1:hover, #tab2:hover, #tab3:hover, #tab4:hover {
      background: #E800C9;
    }
    
    #tab1.selected, #tab2.selected, #tab3.selected, #tab4.selected {
      background: #333333;
    }
    
    #tab1Content, #tab2Content, #tab3Content, #tab4Content {
      width: 100%;
      height: 500px;
      padding: 20px;
      border: 1px solid #B00098;
    }
    
    #tab1Content {
     display: block; 
    }
    
    #tab2Content, #tab3Content, #tab4Content {
     display: none; 
    }
    
    #tab2Content, #tab3Content, #tab4Content {
     display: none; 
    }
    
    .tops {
       vertical-align: top;
    }
    
    .text {
       text-align: justify;
       padding-right: 10px;
       width: 80%
    }
    
    img {
       padding-right: 5px;
       margin-top: -20px;
    }
    </style>
    
    <script>
    function selectTab(tabIndex) {
    document.getElementById('tab1').className = "";
    document.getElementById('tab2').className = "";
    document.getElementById('tab3').className = "";
    document.getElementById('tab4').className = "";
    document.getElementById('tab' + tabIndex).className = "selected"
    
    //Hide All Tabs
    document.getElementById('tab1Content').style.display="none";
    document.getElementById('tab2Content').style.display="none";
    document.getElementById('tab3Content').style.display="none";
    document.getElementById('tab4Content').style.display="none";
    //Show the Selected Tab
    document.getElementById('tab' + tabIndex + 'Content').style.display="block";  
    }
    </script>
    
    <div class="selected" id="tab1" onClick="JavaScript:selectTab(1);">Boek 1</div>
    <div id="tab2" onClick="JavaScript:selectTab(2);">Boek 2</div>
    <div id="tab3" onClick="JavaScript:selectTab(3);">Boek 3</div>
    <div id="tab4" onClick="JavaScript:selectTab(4);">Boek 4</div>
    <br/>
    
    <div id="tab1Content">
    <table><tr><td class="text">
    <b>Identiteit – Paul Verhaeghe</b><br>
    Maatschappelijke veranderingen hebben gezorgd voor een veranderd ik-gevoel. Paul Verhaeghe onderzoekt de effecten van dertig jaar neoliberalisme, vrijemarktwerking, privatisering en de relatie tussen de maakbare samenleving en onze identiteit. Wie wij zijn wordt zoals altijd bepaald door de context waarin wij leven. Die context bepaalt op dit moment: Wie geen succes heeft zal ziek zijn.<br><br>
    De dwang tot succes en geluk blijkt een keerzijde te hebben: het leidt tot verlies aan zelfbesef, tot desoriëntatie en vertwijfeling. De mens is eenzamer dan ooit. De liefde is moeilijk te bereiken en betekenisvol leven is diepgaand problematisch geworden. Vanuit zijn klinische ervaring als psychotherapeut laat Verhaeghe zien hoezeer de veranderde maatschappij doorwerkt in de hedendaagse individuele psychische problemen. Mensen komen met andere psychische klachten bij de psychiater dan voorheen.<br><br>
    <b>Over de auteur</b><br>
    Paul Verhaeghe (geb. 5 november 1955) is van opleiding klinisch psycholoog, van vorming psychoanalyticus. Zijn eerste doctoraat (1985) handelde over hysterie, zijn tweede (1992) over psychodiagnostiek. Hij werkt als gewoon hoogleraar aan de universiteit van Gent. Sedert 2000 gaat zijn belangstelling vooral naar de invloed van maatschappelijke veranderingen op psychologische en psychiatrische moeilijkheden. 
    </td>
    <td class="tops">
    <img src="http://www.alumnei.nl/images/boekenactie_2017/boek_1.jpg" style="float: left; width: 120%; ">
    </td></table>
    </div>
    
    <div id="tab2Content">
    <table><tr><td class="text">
    <b>Get your guts, je instinct als kompas – Hilde Bolt</b><br>
    Iemand met Guts is een persoon met lef, met ballen. Maar heeft lef te maken met de darmen ('gut' = 'darm'), met onze buik? Een heleboel. Ons buikgebied bevat veel meer wijsheid dan we denken. Guts heeft een dubbele betekenis: de signalen uit het buikgebied zijn het instrument, het kompas van waaruit je kunt leven. En Guts is de kracht die je nodig hebt om hiernaar te handelen. Het leven kan mooi, maar ook vol risico's en soms wreed zijn. We kunnen niet altijd kiezen wat onze weg kruist. Toch is het vaak mogelijk om lichter, speelser, creatiever en eenvoudiger met het leven om te gaan.<br><br>
    Get your Guts is een wake-up call, een herinnering aan je eigen oorsprong. De wijsheid van je lichaam, je buikgebied geeft je de mogelijkheid om oeroude instinctieve en verborgen kennis weer tot leven te brengen. Get your Guts is een boek voor mensen die zelf guts willen ontwikkelen, maar ook een boek dat iedere therapeut, coach of hulpverlener gelezen moet hebben.
    <br><br>
    <b>Over de auteur</b><br>
    Hilde Bolt werkt als zelfstandig gevestigd coach, counselor, trainer en psychotherapeut. Ze heeft zich bijgeschoold in oosterse en westerse vormen van lichaamsgericht werken. Tijdens de trainingen creëert ze een veilige, creativiteit bevorderende sfeer waarin veel ‘op maat’ geëxperimenteerd kan worden zodat een ieder op een eigen manier het optimale rendement uit de training kan halen.
    </td>
    <td class="tops">
    <img src="http://www.alumnei.nl/images/boekenactie_2017/boek_2.jpg" style="float: left; width: 120%; ">
    </td></table>
    </div>
    
    <div id="tab3Content">
    <table><tr><td class="text">
    <b>Zin kun je maken - Ilse Vooren en Merlijn Koch</b><br>
    Vanaf nu is zingeving begrijpelijk en hanteerbaar. Zin kun je maken benadert zingeving als een vermogen, waarbinnen vaardigheden en competenties te ontwikkelen zijn. We hebben meer ruimte dan ooit om stil te staan bij de betekenis van onszelf en ons bestaan. Zingeving speelt in onze diepste lagen en vragen en werkt door in het alledaagse leven. Wanneer en hoe ervaar je zin? Dit boek maakt helder hoe zingevingsprocessen werken en wat de functie van zingeving is.<br><br>
    Zingeving hanteerbaar maken is belangrijk om richting te geven aan leven en werk. Voor coaches, leidinggevenden en andere professionals is praktische kennis van zingeving tegenwoordig essentieel. Het gesprek kunnen voeren op het niveau van betekenis is onderdeel van het nieuwe organiseren, leidinggeven en de zelfsturing van professionals.
    Dit boek geeft concrete handvatten om processen van zingeving te begeleiden, individueel en in organisaties. Je ontdekt hoe je kunt bijdragen aan ervaringen van zin in alle verschijningsvormen, zoals motivatie, betrokkenheid, voldoening, (eigen)waarde en betekenis.<br><br>
    <b>Over de auteurs</b><br>
    Ilse Vooren en Merlijn Koch zijn beiden humanisticus. Ilse is oprichter van Food for Flow en gespecialiseerd in zingeving, energie en performance. Merlijn is coach en trainer bij de landelijke coachorganisatie Resilians, met expertise in het vergroten van vitaliteit en veerkracht.
    </td>
    <td class="tops">
    <img src="http://www.alumnei.nl/images/boekenactie_2017/boek_3.jpg" style="float: left; width: 120%; ">
    </td></table>
    </div>
    
    <div id="tab4Content">
    <table><tr><td class="text">
    <b>Mentaliserend Coachen – Peter Bleumer en René Meijer</b><br>
    Mentaliseren is het vermogen tot zelfreflectie en inleving, beide noodzakelijk om goed te functioneren op het werk en privé. Sommige mensen kunnen niet goed mentaliseren, en veel mensen die dit vermogen wel hebben, verliezen het als ze stress ervaren of emotioneel zijn.<br><br>
    Voor effectieve coaching en training is zelfreflectie van de deelnemers essentieel. Wat nu te doen als juist in dat gebrek aan mentaliserend vermogen het probleem schuilt? Dit praktische boek laat zien hoe mensen kunnen leren beter te mentaliseren. Het bevat concrete handvatten voor coaches, trainers en leidinggevenden voor het bevorderen hiervan.
    <br><br>
    <b>Over de auteurs</b><br>
    Ilse Vooren en Merlijn Koch zijn beiden humanisticus. Ilse is oprichter van Food for Flow en gespecialiseerd in zingeving, energie en performance. Merlijn is coach en trainer bij de landelijke coachorganisatie Resilians, met expertise in het vergroten van vitaliteit en veerkracht.
    </td>
    <td class="tops">
    <img src="http://www.alumnei.nl/images/boekenactie_2017/boek_4.jpg" style="float: left; width: 120%; ">
    </td></table>
    </div>
    

    【讨论】:

      【解决方案2】:

      首先回答第二个问题,使用:focus选择器需要点击该项目,但您可以将其设置为在窗口加载时使用javascript聚焦:

      window.onload = function() {
          document.getElementById("tab1").focus();
      };
      

      至于边缘/资源管理器问题,我无法重新创建它,因为两个浏览器都未能将背景颜色更改为 #333,正如您尝试做的那样。

      要解决这两个问题,我建议在 CSS 和 JS 中使用类而不是 :focus

      CSS:

      #tab1.selected, #tab2.selected, #tab3.selected, #tab4.selected {
        background: #333333;
      }
      

      JS:

      document.getElementById('tab1').className = "";
      document.getElementById('tab2').className = "";
      document.getElementById('tab3').className = "";
      document.getElementById('tab4').className = "";
      
      document.getElementById('tab' + tabIndex).className = "selected"
      

      HTML:

      <div class="selected" id="tab1" onClick="JavaScript:selectTab(1);">Boek 1</div>
      <div id="tab2" onClick="JavaScript:selectTab(2);">Boek 2</div>
      <div id="tab3" onClick="JavaScript:selectTab(3);">Boek 3</div>
      <div id="tab4" onClick="JavaScript:selectTab(4);">Boek 4</div>
      

      【讨论】:

        猜你喜欢
        • 2013-09-23
        • 2014-05-07
        • 2017-04-24
        • 1970-01-01
        • 1970-01-01
        • 2012-08-08
        • 2013-11-22
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多