贪吃ღ大魔王
贪吃ღ大魔王

tab切换栏原理--应用实际网站开发 手写代码案例

tab切换栏原理–应用实际网站开发 手写代码案例

tab栏切换在网页开发中非常常见，是前端开发的必需学会的案例，一些tab栏切换和商品信息分栏切换等：

实现代码：

	<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}
			
			ul {
				margin: 50px auto;
			}
			
			.box {
				width: 600px;
				height: 600px;
				border: 1px solid black;
				margin: 50px auto;
			}
			li {
				width: 120px;
				height: 30px;
				border: 1px solid pink;
				float: left;
				box-sizing: border-box;
				text-align: center;
				line-height: 30px;
				background-color: grey;
				cursor: pointer;
			}
			.bb{
				background-color: pink;
			}
			.tm {
				background-color: pink;
				cursor: pointer;
			}
			
			.item {
				width: 100%;
				height: 100px;
				background-color: purple;
				text-align: center;
				display: none;
			}
		style>
	head>

	<body>
		<div class="box">
			<ul>
				<li class="bb">手机模块li>
				<li>电脑模块li>
				<li>电视模块li>
				<li>洗衣机模块li>
				<li>冰箱模块li>
			ul>
			<div class="item" style="display: block;">手机模块内容div>
			<div class="item">电脑模块内容div>
			<div class="item">电视模块内容div>
			<div class="item">洗衣机模块内容div>
			<div class="item">冰箱模块内容div>
		div>
		<script type="text/javascript">
			var lis = document.querySelectorAll('li');
			var buts = document.querySelectorAll('.item');
			for(var i = 0; i < lis.length; i++) {
				lis[i].setAttribute('index',i)
				lis[i].onclick = function() {             --给每个按钮注册点击事件
					for(var i = 0; i < lis.length; i++) {
						lis[i].className = '';		--排他思想  通过改变类名的方式 清除所有安妮羝
					}
					this.className = 'tm';          --这里一定要用this 指只给点击的按钮 添加样式，如果使用lis[i]的话  是在for循环中，lis[i]一直是5
					var index = this.getAttribute('index');   --声明index  得到点击按钮的属性值
					console.log(index);
					for (var i = 0;i < buts.length;i++) {
						buts[i].style.display = 'none';		--排他思想 给所有板块清除 设置隐藏
					}
					buts[index].style.display = 'block'; --给点击按钮 相对于的板块设置 显示
				}
			}
		script>

效果图：
tab切换栏原理--应用实际网站开发 手写代码案例_第1张图片
tab切换栏原理--应用实际网站开发 手写代码案例_第2张图片

你可能感兴趣的:(代码手写,案例,实际开发应用,javascript,css3)

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他