头部菜单栏（选项卡）demo

最新推荐文章于 2024-06-18 09:45:45 发布

攻城狮YanGo

最新推荐文章于 2024-06-18 09:45:45 发布

阅读量1.7k

点赞数

分类专栏： web前端 demo javascript

本文链接：https://blog.csdn.net/weixin_39644462/article/details/84585505

版权

web前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 0 订阅

订阅专栏

demo

8 篇文章 0 订阅

订阅专栏

又来写demo了，一个点击头部菜单栏的选项卡demo，对于初学者来说还是可以参考的。

在目前的web（或者webapp）开发中，很少会用这种来写多页面选项卡的，毕竟如果页面内容复杂的话，会出现加载慢卡顿等问题。但是对于单页面逻辑没那么复杂的话还是可以的。
好了，只是参考参考用，下面贴代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script>
	<title></title>
	<style>
		* {
			list-style:none;
			padding:0;
			margin:0;
			text-decoration:none;
			font-family:'Microsoft YaHei';
		}
		.menu {
			position:relative;
			background-color:#2cc0cf;
			overflow:hidden;
		}
		.menu li {
			position:relative;
			float:left;
			width:20%;
			height:50px;
			text-align:center;
			line-height:50px;
			color: #fff;
		}

		.bg {
			height:100%;
			position:absolute;
			top:0;
			left:0;
			overflow:hidden;
			height:48px;
			width:20%;
			border-bottom: 2px #ffeb3b solid;
		}
		.menu li.active{
			color: #ffeb3b;
			font-weight: bold;
		}
		.tab .tab_list{
			display: none;
		}
		.tab .tab_list p{
			margin-top: 20px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="content">
		<div>
			<ul class="menu">
			    <i class="bg"></i>
			    <li class="active">服装</li>
			    <li>数码</li>
			    <li>家电</li>
			    <li>居家</li>
			    <li>美妆</li>
			</ul>
		</div>
		<div class="tab">
			<div class="tab_list" style="display: block;">
				<p>这是内容服装</p>
			</div>
			<div class="tab_list">
				<p>数码</p>
			</div>
			<div class="tab_list">
				<p>家电</p>
			</div>
			<div class="tab_list">
				<p>居家</p>
			</div>
			<div class="tab_list">
				<p>美妆</p>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$('.menu li').click(function() {
	    var index = $(this).index() - 1;
	    $('.menu li:eq('+index+')').siblings().removeClass('active');
	    $('.menu li:eq('+index+')').addClass('active');
	    $('.tab .tab_list:eq('+index+')').siblings().hide();
	    $('.tab .tab_list:eq('+index+')').show();
	    console.log(index);
	    $('.bg').animate({
	        marginLeft: 20 * index+'%'
	    }, 100);
	});
</script>
</html>

效果图

攻城狮YanGo

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
头部菜单栏（选项卡）demo

又来写demo了，一个点击头部菜单栏的选项卡demo，对于初学者来说还是可以参考的。在目前的web（或者webapp）开发中，很少会用这种来写多页面选项卡的，毕竟如果页面内容复杂的话，会出现加载慢卡顿等问题。但是对于单页面逻辑没那么复杂的话还是可以的。好了，只是参考参考用，下面贴代码 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;h...
复制链接

扫一扫

专栏目录