我正在尝试制作一个用于阅读信息的导航栏。在我单击相应的选项卡后，信息面板会发生变化，但选项卡的颜色会变回未单击时的状态。我想显示当前处于活动状态的选项卡。
我试着用另一个人的例子：Color does not change corresponding the radio checked in Pure CSS Tab Layout，但只有他们的文本是可点击的，而不是整个标签下面的这个版本可以改变颜色悬停，但不被点击后。

<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 class="warpper">
  <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 class="navbar">
  <div class="tabs">
    <label class="tab" id="one-tab" for="one">Technical</label>
    <label class="tab" id="two-tab" for="two">Business</label>
    <label class="tab" id="three-tab" for="three">Cost</label>
    <label class="tab" id="four-tab" for="four">Design</label>
  </div>
</div>

  <div class="panels">
    <div class="panel" 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 class="panel" 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 class="panel" 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 class="panel" 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>

3条答案

按热度按时间

jmp7cifd1#

您可以为此定义另一个css类标签：active {color：#333}。

赞(0）回复(0）举报 2022-12-01

k4aesqcs2#

您没有使用正确的选择器限定来“到达”:checked选项卡的label。接下来，您忘记了#one:checked ~ tab #one-tab中tab的类.（点），因此无论如何都不会工作。
为了让事情按预期运行...

替换您的：

#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;
}

与：

#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;
}

程式码片段：

第一次

vuktfyat3#

需要使用javascript onClick元素来设置标签的颜色。要解决此问题，请调用函数getElementsByClassName（）并调用onclick事件来更改标签的颜色

css 如何使我的导航栏选项卡在单击后改变颜色？

3条答案

相关问题

热门标签

最新问答