如何为预先选择的选项卡和选定的选项卡提供不同的背景颜色？

时间：2017-11-03 13:58:47

标签： html css tabs

请查看this link:

它显示了四个标签。我有两个问题：

问题1：使用资源管理器查看上述链接时，所选选项卡（通过CSS焦点）显示黑色背景。但是，当使用边缘查看上述链接时，这似乎不起作用。我需要改变什么？

问题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>

期待任何建议！ 亲切的问候，Piotr Linski

2 个答案:

答案 0 :(得分：0)

要首先回答第二个问题，使用: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>

答案 1 :(得分：0)

感谢mtr.web，我设法解决了这个问题。 我已将他/她的建议整合到代码中。 因此可以通过this link ...

查看结果

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

<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>
相关问题
最新问题