Maison >interface Web >tutoriel HTML >请教大神，怎么实现商品分类功能_html/css_WEB-ITnose
请教大神，怎么实现商品分类功能_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:52:151629parcourir
本人菜鸟，请大神指导，告诉我大概的思路就可以了。
如图：
回复讨论(解决方案)
可以为不同的衣服设置不同的类别例如
$('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
Article précédent：css盒子的浮动(一)_html/css_WEB-ITnoseArticle suivant：jquery语句写在页面中正常执行,放到JS文件里面就执行不了_html/css_WEB-ITnose