css3之Tab页面切换

 

<ul class='nav'>
    <li>列表1</li>
    <li>列表2</li>
</ul>
<div>列表1内容:123456</div>
<div>列表2内容:abcdefgkijkl</div>　

 

（1）:target 伪类选择器（增加锚点）

<div id="content1">列表1内容:123456</div>
<div id="content2">列表2内容:abcdefgkijkl</div>

<ul class='nav'>
    <li><a href="#content1">列表1</a></li>
    <li><a href="#content2">列表2</a></li>
</ul>

　　内容的切换

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

　　样式的切换（E~F{ cssRules } ，CSS3 兄弟选择符(E~F) ，选择 E 元素后面的所有兄弟元素 F。注意这里，最重要的一句话是 E~F 只能选择 E 元素 之后 的 F 元素，所以顺序就显得很重要了）

#content1:target ~ .nav li{
    // 改变li元素的背景色和字体颜色
    &:first-child{
        background:#ff7300;
        color:#fff;
    }
}
#content2:target ~ .nav li{
    // 改变li元素的背景色和字体颜色
    &:last-child{
        background:#ff7300;
        color:#fff;
    }
}

（2）<input type="radio"> && <label for="">

<div class="container">
    <input class="nav1" id="li1" type="radio" name="nav">
    <input class="nav2" id="li2" type="radio" name="nav">
    <ul class='nav'>
        <li class='active'><label for="li1">列表1</label></li>
        <li><label for="li2">列表2</label></li>
    </ul>
    <div class="content">
        <div class="content1">列表1内容:123456</div>
        <div class="content1">列表2内容:abcdefgkijkl</div>
    </div>
</div>

　　

.nav{
    position:relative;
    overflow:hidden;
}

li{
    width:200px;
    float:left;
    text-align:center;
    background:#ddd;
}

li label{
    display:block;
    width:200px;
    line-height:36px;
    font-size:18px;
    cursor:pointer;
}

.content{
    position:relative;
    overflow:hidden;
    width:400px;
    height:100px;
    border:1px solid #999;
    box-sizing:border-box;
    padding:10px;
}

.content1,
.content2{
    display:none;
    width:100%;
    height:100%;
}

.nav1:checked ~ .nav li {
    background:#ddd;
    color:#000;
    
    &:first-child{
        background:#ff7300;
        color:#fff;
    }
}
.nav2:checked ~ .nav li{
    background:#ddd;
    color:#000;
    
    &:last-child{
        background:#ff7300;
        color:#fff;
    }
}

.nav1:checked ~ .content > div{
    display:none;
    
    &:first-child{
    display:block;
    }
}
.nav2:checked ~ .content > div{
    display:none;
    
    &:last-child{
    display:block;
    }
}

.active {
        background:#ff7300;
        color:#fff;
}

.default{
    display:block;
}