I'm trying to make a navigation bar for reading information. I got the information panels to change after I click on the according tab, but the tab changes color back to its unclicked form. I want to show which tab is currently active.
I tried following a different person's example in here: Color does not change corresponding the radio checked in Pure CSS Tab Layout but only their text is clickable instead of the whole tab this version below can change color on hover but not after being clicked.
<html>
<head>
<style>
.warpper {
display: flex;
flex-direction: column;
align-items: center;
}
.navbar {
width: 100%;
overflow: auto;
}
.tab {
float: left;
padding-top: 12px;
padding-bottom: 12px;
width: 25%; /* Four links of equal widths */
text-align: center;
}
.tab:hover {
background-color: #555;
color: white;
}
.panels {
background: #fff;
min-height: 200px;
width: 100%;
border-radius: 3px;
overflow: hidden;
padding: 20px;
}
.panel {
display: none;
animation: fadein 0.8s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.panel-title {
font-size: 1.5em;
font-weight: bold;
}
input[type="radio"] {
display: none;
}
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel,
#four:checked ~ .panels #four-panel{
display: block;
}
#one:checked ~ tab #one-tab,
#two:checked ~ tab #two-tab,
#three:checked ~ tab #three-tab,
#four:checked ~ tab #four-tab{
background-color: #000;
color: #fff;
}
</style>
<body>
<div >
<input id="one" checked name="group" type="radio" />
<input id="two" name="group" type="radio" />
<input id="three" name="group" type="radio" />
<input id="four" name="group" type="radio" />
<div >
<div >
<label id="one-tab" for="one">Technical</label>
<label id="two-tab" for="two">Business</label>
<label id="three-tab" for="three">Cost</label>
<label id="four-tab" for="four">Design</label>
</div>
</div>
<div >
<div id="one-panel">
<p>During technical inspection, the car is examined to ensure it meets rule and safety requirements. Inspection is sequentially divided into scrutineering, tilt, noise, and brake tests. After each test, a sticker is placed on the car, showing that it passed. The car cannot compete without passing technical inspection.<br/>
In the scrutineering phase of the inspection, judges investigate the car for any possible rule violations. During tilt, the car is placed on a tilt stand with a driver, where it is tilted towards the fuel tank fill nozzle. It must not spill fluids up to 45 degrees and must not roll over up to 60 degrees. For the noise test, the car’s noise output from the exhaust must meet the standards set in the FSAE Rulebook. The car is also tested to ensure the kill switch is functional. To pass the brake test, a driver must accelerate the car on a short straightaway and prove brake integrity by coming to a complete stop without spinning. All four wheels must lock, and the engine must still be running.</p>
</div>
<div id="two-panel">
<p>The business logic case is a document each team must submit to the FSAE Committee. It summarizes the business case behind the plan for production on a larger scale. The document highlights the production scale, targeted market, profitability, and key features. <br/>The presentation is given to judges at competition, where two representatives from the team, usually the Business Lead and a business team member, showcase the car and team to potential “investors”. They must also be able to answer any questions the investors may ask. The judges should be treated as if they are executives at a corporation.</p>
</div>
<div id="three-panel">
<p>A cost report must be created and submitted before competition, which lists the cost for every part and manufacturing process required to build a complete car for production. During the event, a team representative must defend any conflicting items judges find between the car and the document submitted beforehand. Any inconsistencies that cannot be explained will be penalized in the final score. Teams are scored based on the final adjusted cost to produce their car. In addition, a real case scenario is presented to the teams requiring them to respond to a cost overrun or other production issue.</p>
</div>
<div id="four-panel">
<p>The design event is the most heavily weighted static event. The entire team explains and defends design choices, testing, and analysis that went into building the racecar. Judges, engineers who often work in the automotive industry, question team members on their choices, and attempt to challenge every position a team takes and every fact the team states. They want to see that a team has validated every design choice, such as intake shape, suspension point locations, tire sizes/type, engine calibration, and chassis design. <br/>
A design document is submitted to support this event, which members and judges refer to when going over each system. The team is scored based on how knowledgeable the members are, the appropriateness of the parts used, and overall fit-and-finish of the car.</p>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
You can define another css class tab:active{color:#333} for this purpose.
CodePudding user response：
You did not use the proper selector qualification to 'reach' the label for the :checked tab. Next to that you forgot the class . (dot) for tab in #one:checked ~ tab #one-tab, so that would not work anyway.
To make things work as expected...
replace your:
#one:checked ~ tab #one-tab,
#two:checked ~ tab #two-tab,
#three:checked ~ tab #three-tab,
#four:checked ~ tab #four-tab {
background-color: #000;
color: #fff;
}
with:
#one:checked ~ .navbar #one-tab,
#two:checked ~ .navbar #two-tab,
#three:checked ~ .navbar #three-tab,
#four:checked ~ .navbar #four-tab {
background-color: #000;
color: #fff;
}
snippet:
.warpper {
display: flex;
flex-direction: column;
align-items: center;
}
.navbar {
width: 100%;
overflow: auto;
}
.tab {
float: left;
padding-top: 12px;
padding-bottom: 12px;
width: 25%; /* Four links of equal widths */
text-align: center;
}
.tab:hover {
background-color: #555;
color: white;
}
#one:checked ~ navbar tabs label[for="one"] {
background-color: #000;
color: #fff;
}
.panels {
background: #fff;
min-height: 200px;
width: 100%;
border-radius: 3px;
overflow: hidden;
padding: 20px;
}
.panel {
display: none;
animation: fadein 0.8s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.panel-title {
font-size: 1.5em;
font-weight: bold;
}
input[type="radio"] {
display: none;
}
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel,
#four:checked ~ .panels #four-panel {
display: block;
}
#one:checked ~ .navbar #one-tab,
#two:checked ~ .navbar #two-tab,
#three:checked ~ .navbar #three-tab,
#four:checked ~ .navbar #four-tab {
background-color: #000;
color: #fff;
}<div >
<input id="one" checked name="group" type="radio" />
<input id="two" name="group" type="radio" />
<input id="three" name="group" type="radio" />
<input id="four" name="group" type="radio" />
<div >
<div >
<label id="one-tab" for="one">Technical</label>
<label id="two-tab" for="two">Business</label>
<label id="three-tab" for="three">Cost</label>
<label id="four-tab" for="four">Design</label>
</div>
</div>
<div >
<div id="one-panel">
<p>During technical inspection, the car is examined to ensure it meets rule and safety requirements. Inspection is sequentially divided into scrutineering, tilt, noise, and brake tests. After each test, a sticker is placed on the car, showing that it passed. The car cannot compete without passing technical inspection.<br/>
In the scrutineering phase of the inspection, judges investigate the car for any possible rule violations. During tilt, the car is placed on a tilt stand with a driver, where it is tilted towards the fuel tank fill nozzle. It must not spill fluids up to 45 degrees and must not roll over up to 60 degrees. For the noise test, the car’s noise output from the exhaust must meet the standards set in the FSAE Rulebook. The car is also tested to ensure the kill switch is functional. To pass the brake test, a driver must accelerate the car on a short straightaway and prove brake integrity by coming to a complete stop without spinning. All four wheels must lock, and the engine must still be running.</p>
</div>
<div id="two-panel">
<p>The business logic case is a document each team must submit to the FSAE Committee. It summarizes the business case behind the plan for production on a larger scale. The document highlights the production scale, targeted market, profitability, and key features. <br/>The presentation is given to judges at competition, where two representatives from the team, usually the Business Lead and a business team member, showcase the car and team to potential “investors”. They must also be able to answer any questions the investors may ask. The judges should be treated as if they are executives at a corporation.</p>
</div>
<div id="three-panel">
<p>A cost report must be created and submitted before competition, which lists the cost for every part and manufacturing process required to build a complete car for production. During the event, a team representative must defend any conflicting items judges find between the car and the document submitted beforehand. Any inconsistencies that cannot be explained will be penalized in the final score. Teams are scored based on the final adjusted cost to produce their car. In addition, a real case scenario is presented to the teams requiring them to respond to a cost overrun or other production issue.</p>
</div>
<div id="four-panel">
<p>The design event is the most heavily weighted static event. The entire team explains and defends design choices, testing, and analysis that went into building the racecar. Judges, engineers who often work in the automotive industry, question team members on their choices, and attempt to challenge every position a team takes and every fact the team states. They want to see that a team has validated every design choice, such as intake shape, suspension point locations, tire sizes/type, engine calibration, and chassis design. <br/>
A design document is submitted to support this event, which members and judges refer to when going over each system. The team is scored based on how knowledgeable the members are, the appropriateness of the parts used, and overall fit-and-finish of the car.</p>
</div>
</div>
</div>