简洁大气的类似于购物商城的侧选项卡

2015/10/22 46558

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿天猫侧导航-tab切换</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script type="text/javascript" src="../js/jquery-1-7-2.js"></script>
<script type="text/javascript">
    $(function() {
        /*切换导航，添加当前效果*/
        $(".sidebar_tab li a").mouseover(function() {
            $(this).parent("li").addClass("sidebar_tab_cur");
            $(this).parent("li").siblings().removeClass("sidebar_tab_cur");
        });
 
        /*鼠标移入导航，切换对应内容*/
        $(".sidebar_tab_all").mouseover(function() {
            $(".sidebar_main_all").show().siblings().hide();
        });
        $(".sidebar_tab_appliance").mouseover(function() {
            $(".sidebar_main_appliance").show().siblings().hide();
        });
        $(".sidebar_tab_shop").mouseover(function() {
            $(".sidebar_main_shop").show().siblings().hide();
        });
    });
  </script>
</head>
 
<body>
    <div class="sidebar">
        <!--导航切换-->
        <ul class="sidebar_tab">
              <li class="sidebar_tab_all sidebar_tab_cur"><a href="#">所有商品</a></li>
            <li class="sidebar_tab_appliance"><a href="#">电器城</a></li>
            <li class="sidebar_tab_shop"><a href="#">美容院</a></li>
        </ul>
 
        <!--内容切换-->
        <div class="sidebar_main">
            <!--所有商品分类-->
            <div class="sidebar_main_all">
                  <h2>所有商品分类</h2>
                  <ul>
                        <li>
                            <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>&gt;</em></h3>
                        <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
                        <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
                    </li>
                    <li>
                            <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>&gt;</em></h3>
                        <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
                        <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
                    </li>
                    <li>
                            <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>&gt;</em></h3>
                        <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
                        <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
                    </li>
                    <li>
                        <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>&gt;</em></h3>
                        <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
                        <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
                    </li>
                    <li>
                            <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>&gt;</em></h3>
                        <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
                        <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
                    </li> 
                    <li>
                            <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>&gt;</em></h3>
                        <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
                        <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
                    </li> 
                    <li>
                            <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><a href="#">配件</a><em>&gt;</em></h3>
                        <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
                        <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
                    </li> 
                </ul>
            </div>
            <!--电器城商品分类-->
                <div class="sidebar_main_appliance" style="display:none;">
                  <h2>电器城商品分类</h2>
                  <ul>
                    <li>
                        <h3><a href="#">大家电</a><em>&gt;</em></h3>
                                    <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p>
                        <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p>
                    </li>
                    <li>
                        <h3><a href="#">生活电器</a><em>&gt;</em></h3>
                                    <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p>
                        <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p>
                    </li>
                    <li>
                        <h3><a href="#">厨房电器</a><em>&gt;</em></h3>
                                    <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p>
                        <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p>
                    </li>
                    <li>
                        <h3><a href="#">大家电</a><em>&gt;</em></h3>
                                    <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p>
                        <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p>
                    </li>
                    <li>
                        <h3><a href="#">大家电</a><em>&gt;</em></h3>
                                    <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p>
                        <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p>
                    </li>
                </ul>
            </div>
            <!--美容院商品分类-->
            <div class="sidebar_main_shop" style="display:none;">
                <h2>美容院商品分类</h2>
                <ul>
                    <li>
                        <h3><a href="#">家饰鲜花</a><em>&gt;</em></h3>
                        <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
                                    <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
                    </li>
                    <li>
                        <h3><a href="#">家饰鲜花</a><em>&gt;</em></h3>
                        <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
                                    <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
                    </li>
                    <li>
                        <h3><a href="#">家饰鲜花</a><em>&gt;</em></h3>
                        <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
                                    <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
                    </li>
                    <li>
                        <h3><a href="#">家饰鲜花</a><em>&gt;</em></h3>
                        <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
                                    <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
                    </li>
                    <li>
                        <h3><a href="#">家饰鲜花</a><em>&gt;</em></h3>
                        <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
                                    <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
                    </li>
                    <li>
                        <h3><a href="#">家饰鲜花</a><em>&gt;</em></h3>
                        <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
                                    <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
                    </li>
                </ul>
            </div>
        </div><!--内容切换end-->
    </div><!--end .sidebar-->
 
</body>
</html>