Question

我必须使用HTML和CSS为我的易趣商店创建一个导航菜单而不使用Javascript。我想要做的是创建许多带有许多标签的单选按钮，然后单击标签使标签变为粗体并使其显示为文本。

对JSFiddle的第一个影响：https://jsfiddle.net/fb2yn5ts/

（点击标签显示文字）

<a href="#descrizione">My Label</a>

<div id="descrizione">
This is some text
</div>

CSS

#descrizione{
  display: none;
}

#descrizione:target{
  display: block;
}

对JSFiddle的第二个影响：https://jsfiddle.net/cv83q9ow/

（点击标签制作标签粗体）

<div>
  <input type="radio" id="check" class="check-with-label" />
  <label for="check" class="label-for-check">My Label</label>
<div>

的CSS：

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

我无法将这些效果合并为一个，你知道为什么以及如何解决这个问题？非常感谢你！

Answer 1

好的家伙我通过这样做解决了这个问题：

HTML：

<input type="radio" name="navbar_menu_store" id="input_description" class="radio_item_menu">
<label for="input_description" class="label_item_menu">Description</label>
<input type="radio" name="navbar_menu_store" id="input_shipping" class="radio_item_menu">
<label for="input_shipping" class="label_item_menu">Shipping</label>

<div id="contentDescription"><p class="testo_scheda">
This is some text</p>
</div>

<div id="contentShipping"><p class="testo_scheda">
This is some other text</p>
</div>

的CSS：

#input_description:checked ~ #contentDescription, #input_shipping:checked ~ #contentShipping  {
    display: block;
}

#contentDescription, #contentShipping{
  display: none;
}

.radio_item_menu:checked + .label_item_menu {
  font-weight: bold;
}

预览：https://jsfiddle.net/LLornfn8/

非常感谢你！

选中单选按钮更改样式并显示文本

1 个答案: