请教大神，怎么实现商品分类功能

hxiang1118 2014-12-14 04:28:51

本人菜鸟，请大神指导，告诉我大概的思路就可以了。
如图：

...全文

288 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

hxiang1118 2014-12-14

打赏
举报

引用 2 楼 dcxy0 的回复:

大概写了一个示例,可以运行


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

非常感谢！！！

hxiang1118 2014-12-14

打赏
举报

引用楼主 hxiang1118 的回复:

本人菜鸟，请大神指导，告诉我大概的思路就可以了。如图：

好的，谢谢指导

JPF1024 2014-12-14

打赏
举报

大概写了一个示例,可以运行


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