jQuery下拉菜单Tab切换特效代码下载


jQuery下拉菜单Tab切换特效代码下载
jQuery下拉菜单Tab切换特效代码下载以及下拉菜单、Tab切换等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>

2. HTML代码

<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';">
</div>

相关推荐

发表评论

相关文章