京东网页制作之TAB切换栏（内含jquary筛选器介绍）

最新推荐文章于 2023-10-28 17:42:41 发布

tomorrownan

最新推荐文章于 2023-10-28 17:42:41 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： web前端 js

本文链接：https://blog.youkuaiyun.com/w1418899532/article/details/82718560

这篇博客通过实例展示了如何使用HTML、CSS和jQuery创建一个京东风格的商品详情页TAB切换栏。内容包括定义CSS样式，编写HTML结构，并用jQuery实现点击和悬停效果，特别是介绍了jQuery的addClass、removeClass和toggleClass方法，以及jQuery筛选器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：
购物网站点击购物菜单页基本相同，包含商品详情、累计评价等，之前学习了HTML、css、JavaScript和jQuary，今天写个菜单页简单练习下。

京东商品详情菜单页如下：
这里写图片描述
淘宝商品详情菜单页如下：

点击商品介绍下方显示商品介绍，点击规格包装下方显示其相关内容，点击评价下方显示用户评价，鼠标悬停时背景颜色改变，要实现的就是这样一个效果。

定义css样式部分代码：

.tablemenu{
    
    
                    width:700px;
                    margin: 0 auto;
                    border:1px solid #eee;
                    }
        .menu{
    
    
             height:38px;
             background-color:#f7f7f7;
             line-height:38px;
             border-bottom:1px solid #e4393c;
             font-family: "microsoft yahei";
             color:#666;
             }
        .active{
    
    
                color:#fff;
                background-color:#e4393c;
                cursor:default;
                }
        .menu .menu-item{
    
    
                float:left;
                padding:0 30px;
                cursor:pointer;
                font-size: 14px;
                }
        .menu .menu-item:hover{
    
    
                color:#e4393c;
                }
        .content{
    
    
                min-height:200px;
                border:1px solid #eee;
                font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
                }
        .hide{
    
    
                display:none;
                }

        .parameter{
    
    
                   width:990px;
                   color:#666;
                  }
        ul li{
    
    
            list-style:none;
            }
        #parameter-brand li{
    
    
                            width:50%;
                            }
        .parameter ul li{
    
    
                    float:left;
                    padding-left:42px;
                    margin-bottom:5px;
                    }
        .parameter ul{
    
    
                    overflow:hidden;