请教大神,怎么实现商品分类功能_html/css_WEB-ITnose

本人菜鸟,请大神指导,告诉我大概的思路就可以了。
如图:

回复讨论(解决方案)

可以为不同的衣服设置不同的类别例如 

美特斯邦威T恤,然后利用jquery的选取器筛选显示
$(‘li[data-type=”‘ + 类别 + ‘”]’).addClass(‘显示’)。

大概写了一个示例,可以运行

nbsp;html>                        function changeFunction(id)        {            $("#nav"+id).siblings().removeClass("addColor").end().addClass("addColor");            $("#test"+id).siblings().hide().end().show();        }                body{            margin: 50px;        }        .addColor{            color:red;        }        #navs{            width:960px;            height: 30px;            padding: 5px;            border:1px solid red;        }        nav ul{            list-style-type: none;        }        nav ul li{            float:left;            width:100px;            cursor: pointer;        }        .contents{            margin:15px;            padding: 20px;            font-size: 18px;            clear: both;        }    点击下面的标题,可以切换到相应的数据.
    
        
        
            测试1            测试2            测试3            测试4            测试5        
        
            测试10            测试20            测试30            测试40            测试50        
        
            测试100            测试200            测试300            测试400            测试555        
        

登录后复制登录后复制

本人菜鸟,请大神指导,告诉我大概的思路就可以了。
如图:

好的,谢谢指导

大概写了一个示例,可以运行

nbsp;html>                        function changeFunction(id)        {            $("#nav"+id).siblings().removeClass("addColor").end().addClass("addColor");            $("#test"+id).siblings().hide().end().show();        }                body{            margin: 50px;        }        .addColor{            color:red;        }        #navs{            width:960px;            height: 30px;            padding: 5px;            border:1px solid red;        }        nav ul{            list-style-type: none;        }        nav ul li{            float:left;            width:100px;            cursor: pointer;        }        .contents{            margin:15px;            padding: 20px;            font-size: 18px;            clear: both;        }    点击下面的标题,可以切换到相应的数据.
    
        
        
            测试1            测试2            测试3            测试4            测试5        
        
            测试10            测试20            测试30            测试40            测试50        
        
            测试100            测试200            测试300            测试400            测试555        
        

登录后复制登录后复制
非常感谢!!!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3097104.html

(0)
上一篇 2025年3月29日 05:30:56
下一篇 2025年3月29日 05:31:01

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论