商品分類機能の実装方法を達人に聞く_html/css_WEB-ITnose-htmlチュートリアル-php.cn

商品分類機能の実装方法を達人に聞く_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:52:15

オリジナル

1603 人が閲覧しました

私は初心者なので、大まかなアイデアを教えてください。
図に示すように:

ディスカッション (解決策) に返信

服ごとに異なるカテゴリを設定できます。たとえば、

Metersbonwe T シャツ

、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>

ログイン後にコピー

ありがとうございました! ！！