Ask the master, how to implement the product classification function_html/css

Ask the master, how to implement the product classification function_html/css_WEB-ITnose

WBOY

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

Original

1622 people have browsed it

I am a newbie, please give me guidance and give me a rough idea.
As shown in the picture:

Reply to discussion (solution)

You can set different categories for different clothes. For example

Metersbonwe T-shirt

, and then use jquery's selector to filter and display
$('li[data-type="' Category '"]' ).addClass('display').

I roughly wrote an example that can be run

<!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>

Copy after login

I am a novice, please give me some guidance and give me the general idea.
As shown in the picture:

OK, thank you for the guidance

I probably wrote an example that can be run

<!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>

Copy after login

Very good grateful! ! !