JavaScript案例

最新推荐文章于 2023-08-23 16:15:12 发布

Han_Zhou_Z

最新推荐文章于 2023-08-23 16:15:12 发布

阅读量551

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/121679641

版权

案例一：

案例二：

案例一：

点击上方的导航栏，导航栏的背景颜色发生改变，文字也发生改变，下方的主内容发生相应的改变

<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style-type: none;
    }
    .tab{
        width: 850px;
        margin: 100px auto;
    }
    .tab_list{
        height: 39px;
        border: 1px solid rgb(216, 216, 216);
        background-color: #f1f1f1;
    }
    .tab_list li{
        float: left;
        height: 39px;
        line-height: 39px;
        padding: 0 35px;
        text-align: center;
        cursor: pointer;/*鼠标放置显示手指状态*/
    }
    .tab_list .current{
        background-color: #c81623;
        color: #fff;
    }
    .item{
        display: none;
    }
</style>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">商品简介的内容</div>
            <div class="item">规格与包装内容</div>
            <div class="item">售后保障内

最低0.47元/天解锁文章

Han_Zhou_Z

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例

点击上方的导航栏，导航栏的背景颜色发生改变，文字也发生改变，下方的主内容发生相应的改变<style> *{ margin: 0; padding: 0; } li{ list-style-type: none; } .tab{ width: 850px; margin: 100px auto; } .tab_list{ height: 39
复制链接

扫一扫