tab栏的制作

最新推荐文章于 2024-05-07 07:57:05 发布

hcoke

最新推荐文章于 2024-05-07 07:57:05 发布

阅读量178

点赞数

文章标签： elementui webview javascript

本文链接：https://blog.csdn.net/m0_62962469/article/details/123442595

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 980px;
				margin: 50px auto;
				
				
			}
			
			.tab {
				border-bottom: 1px solid #e4393c;
				border-top: 1px solid #eeeeee;
				background-color: #f7f7f7;
			}

			.item {
				display: none;
			}

			 li {
				display: inline-block;
				padding: 10px 25px;
				color: #666;
				font: 14px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
				cursor: pointer;
			}

			.current {
				background-color: #e4393c;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="tab">
				<ul>
					<li class="current">商品介绍</li>
					<li>规格包装</li>
					<li>售后保障</li>
					<li>商品评价(10万+)</li>
					<li>手机社区</li>
				</ul>
			</div>
			<div class="tips">
				<div class="item" style="display: block;">商品介绍模块内容</div>
				<div class="item">规格包装模块内容</div>
				<div class="item">售后保障模块内容</div>
				<div class="item">商品评价模块内容</div>
				<div class="item">手机社区模块内容</div>
			</div>
		</div>
		<script type="text/javascript">
			var items = document.querySelectorAll('.item');
			var lis = document.querySelectorAll('.tab li');
			
			for (var i = 0; i < lis.length; i++) {
            //这里两次用到排它思想，第一次用点击不同的tab时样式发生变化，第二次用在对相应的内容的display属性进行的不同的赋值，达到显示与不显示的差异。
				 lis[i].setAttribute('index',i);
				lis[i].onclick = function() {
//第一次
					for (j = 0; j < lis.length; j++) {
						lis[j].className = '';
					}
					this.className = 'current';
					var index = this.getAttribute('index');
					for (j = 0; j < lis.length; j++) {
//第二次
						items[j].style.display = 'none';
					}
					items[index].style.display = 'block';
				}
				
			}
		</script>
	</body>
</html>

使用到了自定义属性index，以此来将li与对应的div联系起来。

hcoke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
tab栏的制作

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 980px; margin: 50px auto; } .
复制链接

扫一扫