ホームページ > 記事 > ウェブフロントエンド > 商品分類機能の実装方法を達人に聞く_html/css_WEB-ITnose
商品分類機能の実装方法を達人に聞く_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:52:151605ブラウズ
私は初心者なので、大まかなアイデアを教えてください。
図に示すように:
ディスカッション (解決策) に返信
服ごとに異なるカテゴリを設定できます。たとえば、c976f3db826ee23c96f0bd74a195f94d Metersbonwe T シャツbed06894275b65c1ab86501b08a632eb、jquery のセレクターを使用して
$('li[data-type="' + category + '"]').addClass('display') をフィルターして表示します。
実行できるサンプルをざっくり書きました
<!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>
初心者なので、ご指導と大まかなアイデアを教えてください。
写真に示すように:
OK、ご指導ありがとうございます
おそらく例を書いたので実行できます
<!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> ありがとうございました! ！ ！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。