通过css控制tab显示哪个元素，无需使用js

html部分： 

<article class="tabs">

          <input checked="" id="one" name="tabs" type="radio" />

          <label for="one">热门搜索1</label>

          <input id="two" name="tabs" type="radio" value="Two" />

          <label for="two">热门搜索1</label>

          <input id="three" name="tabs" type="radio" />

          <label for="three">热门搜索1</label>

          <div class="panels">

            <div class="panel">

              <h2>多地高温</h2>

              <p>

                【环球时报综合报道】

              </p>

              <p>

                《环球时报》

              </p>

            </div>

            <div class="panel">

              <h2>最高52.3℃！</h2>

            </div>

            <div class="panel">

              <h2>全国天气</h2>

            </div>

          </div>

        </article>

css部分：

.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,

.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),

.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),

.tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {

  opacity: 1;

 transition: 0.3s;

}

 

通过兄弟元素控制input:nth-of-type(4):checked ~ .panels     A~.b是a的是否checked的控制兄弟元素的透明度。可以实现元素是否想见识隐藏从而实现不用js语言就可以切换tab。