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红色

                        

            (2)点击 div2黄色

                        

            (3)点击 div3绿色

                        

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值