jq实现的tab小demo

最新推荐文章于 2023-09-15 10:06:35 发布

神以灵

最新推荐文章于 2023-09-15 10:06:35 发布

阅读量1k

点赞数 1

分类专栏：【杂记】文章标签：前端打怪升级 jq 前端-练习

本文链接：https://blog.csdn.net/juzipidemimi/article/details/72866414

版权

【杂记】专栏收录该内容

37 篇文章 2 订阅

订阅专栏

###一：体会###

虽然只是一个很小的demo，但途中却遇到很多问题，问题都很小但是却很难发现，解决过程很是恼火，偶尔灵光一闪却又想了起来，而且混淆了很多jq和原生js中的方法，分不清楚哪个是jq中的，哪个是原生js中的，有很多东西都看过，但是却又很多细节不清楚，做东西时很容易发生问题并且半天发现不了，要是有过目不忘的本领就好了~~

###二：查询知识点###

不是jq对象无法使用jq库中的方法，比如下列代码中的boxs[i],不要将其转化为jq对象$(boxs[i])才能使用方法show()
在for循环中使用let声明的变量只在本轮循环有效，每一次循环的变量都是一个新的变量，可以循环闭包中变量i的问题，也在下面代码中有体现
数组也具有indexOf方法，例如：arr.indexOf(“a”);返回"a"在数组中第一次出现的位置
原生js中绑定点击事件方法：.onclick = function(){}; jq中绑定点击事件方法：.click(function(){});或者使用.on() 方法
事件冒泡和事件捕捉的区别：父级元素和子级元素都绑定了click事件，如果点击了子级元素，父级元素和子级元素都会触发click事件
事件捕捉：父元素先触发，子元素后触发
事件冒泡：子元素先触发，父元素后触发
this的指向由运行时指定，而不是编写时指定，箭头函数相反
jq中的eq有两种用法： 1. :eq(index)选择器用法，2. .eq(index)函数用法，都是获取相应index位置的元素
jq中的index()方法，不传参数index()用法，获取相应元素在同胞元素的位置，传参 $() . i n d e x (e l e m e n t) 用法，获取 e l e m e n t 元素在$ (selector)中的位置，element为相应的jq和dom选择器
.sibings()获取相应元素的同胞元素，还可以添加选择器限制相应选择器的同胞元素.sibings(selector)
mouseover与mouseenter的区别：
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseout与mouseleave同理
###三：代码
####html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>tab选项卡</title>
		<link rel="stylesheet" href="css/tab.css" />
	</head>
	<body>
		<div class="main">
			<ul class="tab_nav">
				<li class="tab select">HTML</li>
				<li class="tab unsel">CSS</li>
				<li class="tab unsel">JS</li>
				<li class="white">空白</li>
			</ul>
			<div class="tab_content">
				<div class="box1">我负责网页结构。</div>
				<div class="box2 hide">我负责网页样式。</div>
				<div class="box3 hide">我负责网页特效。</div>
			</div>
		</div>
		
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/tab.js"></script>
	</body>
</html>

####css代码：

body,ul,li,div{
	margin:0px;
	padding:0px;
}
ul,li{
	list-style: none;
}
ul:after{
	content:"";
	display: block;
	clear:both;
}
li{
	float:left;
	padding:5px;
}
.main{
	padding:20px;
	border:1px solid #bbb;
	width:280px;
	margin:100px auto 0;
}
.tab_nav .select{
	border-top:1px solid #bbb;
	border-left:1px solid #bbb;
	border-right:1px solid #bbb;
}
.tab_nav .unsel{
	border-bottom:1px solid #bbb;
	
}
.tab_nav .white{
	text-indent: -9999em;
	width:100px;
	border-bottom:1px solid #bbb;
}
.tab_nav .tab{
	width:46px;
	text-align: center;
	box-sizing;content-box;
}
.tab_content div{
	padding-top:10px;
	height:50px;
}
.tab_content .hide{
	display: none;
}

####javascript代码：

$(function(){
	var tabs = $(".main .tab_nav .tab");
	var boxs = $(".main .tab_content div");
	for(let i in tabs){
		tabs[i].onclick = function(){
			$(this).addClass("select").removeClass("unsel").siblings().addClass("unsel").removeClass("select");
			$(boxs[i]).show().siblings().hide();
		};
	};
});

###四：demo效果图
这里写图片描述

如果有问题，或者有好的意见，可以在下面给我评论，我还是个noob.

神以灵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq实现的tab小demo

一：体会虽然只是一个很小的demo，但途中却遇到很多问题，问题都很小但是却很难发现，解决过程很是恼火，偶尔灵光一闪却又想了起来，而且混淆了很多jq和原生js中的方法，分不清楚哪个是jq中的，哪个是原生js中的，有很多东西都看过，但是却又很多细节不清楚，做东西时很容易发生问题并且半天发现不了，要是有过目不忘的本领就好了~~二：查询知识点不是jq对象无法使用jq库中的方法，比如下列代码中的boxs
复制链接

扫一扫