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

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

WBOY
WBOYoriginal
2016-06-24 11:52:151583parcourir

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


回复讨论(解决方案)

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

  • 美特斯邦威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>

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


    好的,谢谢指导

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

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


    非常感谢!!!
    Déclaration:
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn