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

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

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

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家,也给大家做个参考。

<!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 >  	    <!--导航切换-->        <ul >        	  <li ><a href="#">所有商品</a></li>            <li ><a href="#">电器城</a></li>            <li ><a href="#">美容院</a></li>        </ul>        <!--内容切换-->        <div >            <!--所有商品分类-->            <div >        	      <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  >            	  <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  >              	<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>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的简洁大气的类似于购物商城的侧选项卡全部内容,希望文章能够帮你解决简洁大气的类似于购物商城的侧选项卡所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1090980.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存