请教大神，怎么实现商品分类功能_html/css

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

WBOY

Freigeben： 2016-06-24 11:52:15

Original

1623 Leute haben es durchsucht

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

回复讨论(解决方案)

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

美特斯邦威T恤

，然后利用jquery的选取器筛选显示
$('li[data-type="' + 类别 + '"]').addClass('显示')。

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

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8"/>    <title></title>    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>    <script type="text/javascript">        function changeFunction(id)        {            $("#nav"+id).siblings().removeClass("addColor").end().addClass("addColor");            $("#test"+id).siblings().hide().end().show();        }    </script>    <style type="text/css">        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;        }    </style></head><body>点击下面的标题,可以切换到相应的数据.<div id="navs">    <nav>    <ul>       <li id="nav0" onclick="changeFunction(0)">首页的数据1</li>        <li id="nav1" onclick="changeFunction(1)">第一个数据</li>        <li id="nav2" onclick="changeFunction(2)">第二个数据</li>    </ul>    </nav></div>        <div id="contents">        <div id="test0" class="contents">            测试1            测试2            测试3            测试4            测试5        </div>        <div id="test1" style="display: none;" class="contents">            测试10            测试20            测试30            测试40            测试50        </div>        <div id="test2" style="display: none;" class="contents">            测试100            测试200            测试300            测试400            测试555        </div>        </div></body></html>

Nach dem Login kopieren

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

好的，谢谢指导

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

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8"/>    <title></title>    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>    <script type="text/javascript">        function changeFunction(id)        {            $("#nav"+id).siblings().removeClass("addColor").end().addClass("addColor");            $("#test"+id).siblings().hide().end().show();        }    </script>    <style type="text/css">        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;        }    </style></head><body>点击下面的标题,可以切换到相应的数据.<div id="navs">    <nav>    <ul>       <li id="nav0" onclick="changeFunction(0)">首页的数据1</li>        <li id="nav1" onclick="changeFunction(1)">第一个数据</li>        <li id="nav2" onclick="changeFunction(2)">第二个数据</li>    </ul>    </nav></div>        <div id="contents">        <div id="test0" class="contents">            测试1            测试2            测试3            测试4            测试5        </div>        <div id="test1" style="display: none;" class="contents">            测试10            测试20            测试30            测试40            测试50        </div>        <div id="test2" style="display: none;" class="contents">            测试100            测试200            测试300            测试400            测试555        </div>        </div></body></html>

Nach dem Login kopieren

非常感谢！！！