私は初心者なので、大まかなアイデアを教えてください。
図に示すように:
服ごとに異なるカテゴリを設定できます。たとえば、
実行できるサンプルをざっくり書きました
<!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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
