navbar - 只能使用css激活一个选项卡 [英] navbar - making only one tab active with css

问题描述

是否有任何例子只使用纯CSS而不使用任何JS来使单个标签生效？ 是的。看看纯粹的CSS方式：

ul {margin：0;填充：0; list-style：none; display：block;} ul li {display：inline-block;保证金：0;填充：0; list-style：none;} ul li input {display：none;} ul li a {text-decoration：none; border：1px solid #ccc; padding：3px 10px; line-height：1;颜色：＃333; cursor：pointer;} ul li a：hover，ul li input：checked + a {background-color：＃999; color：#fff;}

< ul> <李> <标签> < input type =checkbox/> < a>项目1< / a> < /标签> < /锂> <李> <标签> < input type =checkbox/> < a>项目2< / a> < /标签> < /锂> <李> <标签> < input type =checkbox/> < a>项目3< / a> < /标签> < /锂> <李> <标签> < input type =checkbox/> < a>项目4< / a> < /标签> < /锂> <李> <标签> < input type =checkbox/> < a>项目5< / a> < /标签> < / li>

$ b

单次活动：



ul {margin：0;填充：0; list-style：none; display：block;} ul li {display：inline-block;保证金：0;填充：0; list-style：none;} ul li input {display：none;} ul li a {text-decoration：none; border：1px solid #ccc; padding：3px 10px; line-height：1;颜色：＃333; cursor：pointer;} ul li a：hover，ul li input：checked + a {background-color：＃999; color：#fff;}

< ul> <李> <标签> < input type =radioname =a/> < a>项目1< / a> < /标签> < /锂> <李> <标签> < input type =radioname =a/> < a>项目2< / a> < /标签> < /锂> <李> <标签> < input type =radioname =a/> < a>项目3< / a> < /标签> < /锂> <李> <标签> < input type =radioname =a/> < a>项目4< / a> < /标签> < /锂> <李> <标签> < input type =radioname =a/> < a>项目5< / a> < /标签> < / li>< / ul>

Is there any example of making only one tab active on click with pure CSS without any JS?

解决方案

Yes. Check out the pure CSS way:

ul {margin: 0; padding: 0; list-style: none; display: block;}
ul li {display: inline-block; margin: 0; padding: 0; list-style: none;}
ul li input {display: none;}
ul li a {text-decoration: none; border: 1px solid #ccc; padding: 3px 10px; line-height: 1; color: #333; cursor: pointer;}
ul li a:hover,
ul li input:checked + a {background-color: #999; color: #fff;}

<ul>
  <li>
    <label>
      <input type="checkbox" />
      <a>Item 1</a>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      <a>Item 2</a>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      <a>Item 3</a>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      <a>Item 4</a>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      <a>Item 5</a>
    </label>
  </li>
</ul>

For only one single active at a time:

ul {margin: 0; padding: 0; list-style: none; display: block;}
ul li {display: inline-block; margin: 0; padding: 0; list-style: none;}
ul li input {display: none;}
ul li a {text-decoration: none; border: 1px solid #ccc; padding: 3px 10px; line-height: 1; color: #333; cursor: pointer;}
ul li a:hover,
ul li input:checked + a {background-color: #999; color: #fff;}

<ul>
  <li>
    <label>
      <input type="radio" name="a" />
      <a>Item 1</a>
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="a" />
      <a>Item 2</a>
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="a" />
      <a>Item 3</a>
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="a" />
      <a>Item 4</a>
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="a" />
      <a>Item 5</a>
    </label>
  </li>
</ul>

这篇关于navbar - 只能使用css激活一个选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！