Home >Web Front-end >HTML Tutorial >Ask the master, how to implement the product classification function_html/css_WEB-ITnose
Ask the master, how to implement the product classification function_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:151617browse
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 7f67e865afce85712e5320c9ec2500c0Metersbonwe T-shirtbed06894275b65c1ab86501b08a632eb, 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>
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> Very good grateful! ! !
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Floating of css box (1)_html/css_WEB-ITnoseNext article：Floating of css box (1)_html/css_WEB-ITnose