Tab切换(小项目)

在页面中实现几块内容转换:

    1.在界面写几个点击项

            <a href="#div1">div1红色</a>              /*注意href="#div1"是用以链接切换的关键点*/
    <a href="#div2">div2黄色</a>
    <a href="#div3">div3绿色</a>

    2.书写一个切换快

            <div class="box">
          /*id部分与切换密切相关*/
<div class="div1" id="div1">div1红色</div>
<div class="div2" id="div2">div2黄色</div>
<div class="div3" id="div3">div3绿色</div>

    </div>

      3.style部分

            .box,.div1,.div2,.div3{
width:300px;
height: 300px;
}
/*隐藏没被看到的东西,溢出隐藏*/
.box{overflow:hidden;} 
.div1{
background:red;
}
.div2{
background:yellow;
}
.div3{
background:green;

}

        4.呈现效果

            (1)点击 div1红色

                        Tab切换(小项目)

            (2)点击 div2黄色

                        Tab切换(小项目)

            (3)点击 div3绿色

                        Tab切换(小项目)