<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery下拉菜单Tab切换代码 - 【更多源码：www.96flw.com】</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<style type="text/css">
html,body,div,object,iframe,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,blockquote,pre,fieldset,form,label,legend,button,input,textarea,table,caption,tbody,tfoot,thead,tr,th,td,a,abbr,address,acronym,cite,code,del,dfn,em,img,ins,kbd,q,span,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,section,article,aside,header,footer,nav,menu,hgroup,dialog,details,summary,figure,figcaption,canvas,embed,output,ruby,time,mark,audio,video {
margin:0;
padding:0;
box-sizing: border-box;
list-style: none;
}
html {
color:#333;
background:#eee;
}
body {
line-height:1;
}
.clearfix:after{ content: ""; clear: both; display: block; }
.menu,.tab-box{ width: 300px; height: 100%; margin: 0 auto; padding-top: 25px; background: #fff; }
.menu ul li{ /*height:45px; */line-height: 56px; border-bottom: 1px solid #eee; font-size: 15px; }
.menu ul li span{ display: block; height: 100%; width: 100%; position: relative; padding: 0 20px; }
.menu ul li span i{ display: block; height: 20px; width: 20px; background: url(img/arr.png) no-repeat center center; background-size:80% 80%; position: absolute; right: 20px; top: 50%; margin-top: -10px; transition: all 0.3s ease-out; transform: rotate(0deg);}
.menu ul li span i.action{ transition: all 0.3s ease-out;transform: rotate(180deg);}
.menu ul li>dl{ display: none; padding-left: 35px; background: #d8e7f5; }
.menu ul li>dl a{ display: block; height: 100%; width: 100%; font-size: 14px; color: #222; text-decoration: none; }
.tab-box{ width: 600px; margin-top: 40px; }
.tab-box .tab{border-bottom: 1px solid #eee; }
.tab-box .tab ul li{ width: 33.3%; float: left; height: 55px; line-height: 55px; text-align: center; }
.tab-box .tab ul li.action{ background: #d8e7f5; }
.tab-box .box{width: 100%; height: 200px; }
.tab-box .box .item{ display: none; padding: 15px;height: 200px; }
.tab-box .box .item:first-child{display: block;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>
<span>菜单1<i class="icon"></i></span>
<dl>
<dt><a href="#">菜单1-1</a></dt>
<dt><a href="#">菜单1-1</a></dt>
</dl>
</li>
<li>
<span>菜单2<i class="icon"></i></span>
<dl>
<dt><a href="#">菜单2-2</a></dt>
<dt><a href="#">菜单2-2</a></dt>
</dl>
</li>
<li>
<span>菜单3<i class="icon"></i></span>
<dl>
<dt><a href="#">菜单3-1</a></dt>
<dt><a href="#">菜单3-1</a></dt>
</dl>
</li>
<li>
<span>菜单4<i class="icon"></i></span>
<dl>
<dt><a href="#">菜单4-1</a></dt>
<dt><a href="#">菜单4-1</a></dt>
</dl>
</li>
<li>
<span>菜单5<i class="icon"></i></span>
<dl>
<dt><a href="#">菜单5-1</a></dt>
<dt><a href="#">菜单5-1</a></dt>
</dl>
</li>
<li>
<span>菜单6<i class="icon"></i></span>
<dl>
<dt><a href="#">菜单6-1</a></dt>
<dt><a href="#">菜单6-1</a></dt>
</dl>
</li>
<li>
<span>菜单7<i class="icon"></i></span>
<dl>
<dt><a href="#">菜单7-1</a></dt>
<dt><a href="#">菜单7-1</a></dt>
</dl>
</li>
</ul>
</div>
<div class="tab-box">
<div class="tab">
<ul class="clearfix">
<li class="action">菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</div>
<div class="box">
<div class="item">菜单1-box</div>
<div class="item">菜单2-box</div>
<div class="item">菜单3-box</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".menu ul li").click(function(){
$(this).find("dl").slideToggle(200).parent().siblings().find("dl").slideUp(200);
$(this).find("span i").toggleClass('action').parents().siblings().find("span i").removeClass('action');
})
$(".tab ul li").click(function(){
$(".tab ul li").removeClass('action');
$(this).addClass('action');
$(".box .item").hide();
$(".box .item").eq($(".tab ul li").index(this)).show();
})
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
