纯css实现tab栏切换

思路: 使用锚点跳转以及css3新增的target伪类选择器

target伪类选择器介绍

• :target是css3新增的一个伪类,用于选择当前活动的目标元素

纯css的tab栏切换代码实现

     <ul>
        <li><a href="#content1">列表1</a></li>
        <li><a href="#content2">列表2</a></li>
    </ul>
    <div id="content1">
        内容111111
    </div>
    <div id="content2">
        内容222222
    </div>

     #content1,#content2{
        display: none;
    }

    #content1:target,
    #content2:target{
        display: block;
    }