本人菜鸟，请大神指导，告诉我大概的思路就可以了。
如图：
可以为不同的衣服设置不同的类别例如
大概写了一个示例,可以运行
<!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>
