add files
This commit is contained in:
qianguyihao
parent
9411527deb
commit
6a105f5c23
@ -97,7 +97,7 @@
|
||||
|
||||
|
||||
|
||||
声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。
|
||||
声明：ul的儿子，只能是li。但是li是一个容器级标签，**li里面什么都能放，甚至可以再放一个ul**。
|
||||
|
||||
### 2、有序列表`<OL>`，里面的每一项是`<li>`
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
## 绑定事件的两种方式
|
||||
|
||||
我们在上一篇文章中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。
|
||||
我们在上一篇文章 [DOM操作详解](http://www.cnblogs.com/smyhvae/p/8366012.html) 中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。
|
||||
|
||||
### 方式一：onclick
|
||||
|
||||
|
||||
1157
07-jQuery/01-jQuery的介绍和选择器.md
Normal file
1157
07-jQuery/01-jQuery的介绍和选择器.md
Normal file
File diff suppressed because it is too large
Load Diff
526
07-jQuery/02-jQuery动画详解.md
Normal file
526
07-jQuery/02-jQuery动画详解.md
Normal file
@ -0,0 +1,526 @@
|
||||
|
||||
|
||||
> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
## 前言
|
||||
|
||||
jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
|
||||
|
||||
## 显示动画
|
||||
|
||||
方式一：
|
||||
|
||||
```javascript
|
||||
$("div").show();
|
||||
```
|
||||
|
||||
解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过`display: block;`实现的。
|
||||
|
||||
方式二：
|
||||
|
||||
```javascript
|
||||
$("div").show(2000);
|
||||
```
|
||||
|
||||
解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
方式三：
|
||||
|
||||
```javascript
|
||||
$("div").show("slow");
|
||||
```
|
||||
|
||||
参数可以是：
|
||||
|
||||
- slow 慢：600ms
|
||||
|
||||
- normal 正常：400ms
|
||||
|
||||
- fast 快：200ms
|
||||
|
||||
解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。
|
||||
|
||||
方式四：
|
||||
|
||||
```javascript
|
||||
//show(毫秒值，回调函数;
|
||||
$("div").show(5000,function () {
|
||||
alert("动画执行完毕！");
|
||||
});
|
||||
```
|
||||
|
||||
解释：动画执行完后，立即执行回调函数。
|
||||
|
||||
**总结：**
|
||||
|
||||
上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。
|
||||
|
||||
## 隐藏动画
|
||||
|
||||
方式参照上面的show()方法的方式。如下：
|
||||
|
||||
|
||||
```javascript
|
||||
$(selector).hide();
|
||||
|
||||
$(selector).hide(1000);
|
||||
|
||||
$(selector).hide("slow");
|
||||
|
||||
$(selector).hide(1000, function(){});
|
||||
```
|
||||
|
||||
**显示和隐藏的来回切换：**
|
||||
|
||||
显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。
|
||||
|
||||
同样是四种方式：
|
||||
|
||||
```javascript
|
||||
$(selector).toggle();
|
||||
|
||||
```
|
||||
|
||||
## 滑入和滑出
|
||||
|
||||
**1、滑入动画效果**：（类似于生活中的卷帘门）
|
||||
|
||||
|
||||
```javascript
|
||||
$(selector).slideDown(speed, 回调函数);
|
||||
```
|
||||
|
||||
解释：下拉动画，显示元素。
|
||||
|
||||
注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）
|
||||
|
||||
|
||||
**2 滑出动画效果：**
|
||||
|
||||
```javascript
|
||||
$(selector).slideUp(speed, 回调函数);
|
||||
```
|
||||
|
||||
解释：上拉动画，隐藏元素。
|
||||
|
||||
|
||||
**3、滑入滑出切换动画效果：**
|
||||
|
||||
```javascript
|
||||
$(selector).slideToggle(speed, 回调函数);
|
||||
```
|
||||
|
||||
参数解释同show()方法。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
display: none;
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
//点击按钮后产生动画
|
||||
$("button:eq(0)").click(function () {
|
||||
|
||||
//滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
|
||||
$("div").slideDown(2000, function () {
|
||||
alert("动画执行完毕！");
|
||||
});
|
||||
})
|
||||
|
||||
//滑出动画
|
||||
$("button:eq(1)").click(function () {
|
||||
|
||||
//滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
|
||||
$("div").slideUp(2000, function () {
|
||||
alert("动画执行完毕！");
|
||||
});
|
||||
})
|
||||
|
||||
$("button:eq(2)").click(function () {
|
||||
//滑入滑出切换（同样有四种用法）
|
||||
$("div").slideToggle(1000);
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button>滑入</button>
|
||||
<button>滑出</button>
|
||||
<button>切换</button>
|
||||
<div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 淡入淡出动画
|
||||
|
||||
1、淡入动画效果：
|
||||
|
||||
```javascript
|
||||
$(selector).fadeIn(speed, callback);
|
||||
```
|
||||
|
||||
作用：让元素以淡淡的进入视线的方式展示出来。
|
||||
|
||||
2、淡出动画效果：
|
||||
|
||||
```javascript
|
||||
$(selector).fadeOut(1000);
|
||||
```
|
||||
|
||||
作用：让元素以渐渐消失的方式隐藏起来
|
||||
|
||||
3、淡入淡出切换动画效果：
|
||||
|
||||
|
||||
```javascript
|
||||
$(selector).fadeToggle('fast', callback);
|
||||
```
|
||||
|
||||
作用：通过改变透明度，切换匹配元素的显示或隐藏状态。
|
||||
|
||||
参数的含义同show()方法。
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
display: none;
|
||||
/*opacity: 1;*/
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
//点击按钮后产生动画
|
||||
$("button:eq(0)").click(function () {
|
||||
// //淡入动画用法1: fadeIn(); 不加参数
|
||||
$("div").fadeIn();
|
||||
|
||||
// //淡入动画用法2: fadeIn(2000); 毫秒值
|
||||
// $("div").fadeIn(2000);
|
||||
// //通过控制 透明度和display
|
||||
|
||||
//淡入动画用法3: fadeIn(字符串); slow慢：600ms normal正常:400ms fast快：200ms
|
||||
// $("div").fadeIn("slow");
|
||||
// $("div").fadeIn("fast");
|
||||
// $("div").fadeIn("normal");
|
||||
|
||||
//淡入动画用法4: fadeIn(毫秒值，回调函数[显示完毕执行什么]);
|
||||
// $("div").fadeIn(5000,function () {
|
||||
// alert("动画执行完毕！");
|
||||
// });
|
||||
})
|
||||
|
||||
//滑出动画
|
||||
$("button:eq(1)").click(function () {
|
||||
// //滑出动画用法1: fadeOut(); 不加参数
|
||||
// $("div").fadeOut();
|
||||
|
||||
// //滑出动画用法2: fadeOut(2000); 毫秒值
|
||||
// $("div").fadeOut(2000); //通过这个方法实现的：display: none;
|
||||
// //通过控制 透明度和display
|
||||
|
||||
//滑出动画用法3: fadeOut(字符串); slow慢：600ms normal正常:400ms fast快：200ms
|
||||
// $("div").fadeOut("slow");
|
||||
// $("div").fadeOut("fast");
|
||||
// $("div").fadeOut("normal");
|
||||
|
||||
//滑出动画用法1: fadeOut(毫秒值，回调函数[显示完毕执行什么]);
|
||||
// $("div").fadeOut(2000,function () {
|
||||
// alert("动画执行完毕！");
|
||||
// });
|
||||
})
|
||||
|
||||
$("button:eq(2)").click(function () {
|
||||
//滑入滑出切换
|
||||
//同样有四种用法
|
||||
$("div").fadeToggle(1000);
|
||||
})
|
||||
|
||||
$("button:eq(3)").click(function () {
|
||||
//改透明度
|
||||
//同样有四种用法
|
||||
$("div").fadeTo(1000, 0.5, function () {
|
||||
alert(1);
|
||||
});
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button>淡入</button>
|
||||
<button>淡出</button>
|
||||
<button>切换</button>
|
||||
<button>改透明度为0.5</button>
|
||||
<div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 自定义动画
|
||||
|
||||
```javascript
|
||||
$(selector).animate({params}, speed, callback);
|
||||
```
|
||||
|
||||
作用：执行一组CSS属性的自定义动画。
|
||||
|
||||
- 第一个参数表示：要执行动画的CSS属性（必选）
|
||||
|
||||
- 第二个参数表示：执行动画时长（可选）
|
||||
|
||||
- 第三个参数表示：动画执行完后，立即执行的回调函数（可选）
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 30px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
jQuery(function () {
|
||||
$("button").click(function () {
|
||||
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
|
||||
var json2 = {
|
||||
"width": 100,
|
||||
"height": 100,
|
||||
"left": 100,
|
||||
"top": 100,
|
||||
"border-radius": 100,
|
||||
"background-color": "red"
|
||||
};
|
||||
|
||||
//自定义动画
|
||||
$("div").animate(json, 1000, function () {
|
||||
$("div").animate(json2, 1000, function () {
|
||||
alert("动画执行完毕！");
|
||||
});
|
||||
});
|
||||
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button>自定义动画</button>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 停止动画
|
||||
|
||||
```javascript
|
||||
$(selector).stop(true, false);
|
||||
```
|
||||
|
||||
**里面的两个参数，有不同的含义。**
|
||||
|
||||
第一个参数：
|
||||
|
||||
- true：后续动画不执行。
|
||||
|
||||
- false：后续动画会执行。
|
||||
|
||||
第二个参数：
|
||||
|
||||
- true：立即执行完成当前动画。
|
||||
|
||||
- false：立即停止当前动画。
|
||||
|
||||
PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。
|
||||
|
||||
**效果演示：**
|
||||
|
||||
当第二个参数为true时，效果如下：
|
||||
|
||||
|
||||
|
||||
当第二个参数为false时，效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
这个**后续动画**我们要好好理解，来看个例子。
|
||||
|
||||
**案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 330px;
|
||||
height: 30px;
|
||||
margin: 100px auto 0;
|
||||
padding-left: 10px;
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
.wrap li {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.wrap > ul > li {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrap a {
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrap li ul {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
//入口函数
|
||||
$(document).ready(function () {
|
||||
//需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
|
||||
var jqli = $(".wrap>ul>li");
|
||||
|
||||
//绑定事件
|
||||
jqli.mouseenter(function () {
|
||||
$(this).children("ul").stop().slideDown(1000);
|
||||
});
|
||||
|
||||
//绑定事件(移开隐藏)
|
||||
jqli.mouseleave(function () {
|
||||
$(this).children("ul").stop().slideUp(1000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="javascript:void(0);">一级菜单1</a>
|
||||
<ul>
|
||||
<li><a href="javascript:void(0);">二级菜单1</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单2</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);">一级菜单1</a>
|
||||
<ul>
|
||||
<li><a href="javascript:void(0);">二级菜单1</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单2</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);">一级菜单1</a>
|
||||
<ul>
|
||||
<li><a href="javascript:void(0);">二级菜单1</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单2</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
|
||||
|
||||
如果去掉stop()函数，效果如下：（不是我们期望的效果）
|
||||
|
||||
|
||||
|
||||
### stop方法的总结
|
||||
|
||||
当调用stop()方法后，队列里面的下一个动画将会立即开始。
|
||||
但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
|
||||
|
||||
如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
|
||||
|
||||
注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
397
07-jQuery/03-jQuery操作DOM.md
Normal file
397
07-jQuery/03-jQuery操作DOM.md
Normal file
@ -0,0 +1,397 @@
|
||||
|
||||
|
||||
|
||||
## 文本主要内容
|
||||
|
||||
- 样式和类操作
|
||||
|
||||
- jQuery 动画
|
||||
|
||||
- 节点操作
|
||||
|
||||
|
||||
## 样式操作和类操作
|
||||
|
||||
作用：设置或获取元素的样式属性值。
|
||||
|
||||
### 样式操作
|
||||
|
||||
**1、设置样式：**
|
||||
|
||||
```javascript
|
||||
|
||||
//设置单个样式： css(属性，值);
|
||||
$("div").css("background-color","red");
|
||||
|
||||
//设置多个样式： css(json);
|
||||
$("div").css({"width":100,"height":100,"background-color":"pink"});
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
**2、获取样式：**
|
||||
|
||||
```javascript
|
||||
//获取样式：css(属性);
|
||||
//获取的时候如果有很多个，那么获取jquery对象中的第一个
|
||||
alert($("div").css("width"));
|
||||
```
|
||||
|
||||
举例如下：
|
||||
|
||||
20180205_1315.png
|
||||
|
||||
### 类操作（className）
|
||||
|
||||
**1、添加类样式：**
|
||||
|
||||
```javascript
|
||||
$(selector).addClass("liItem"); //为指定元素添加类className
|
||||
```
|
||||
|
||||
注意：此处类名不带点，所有类操作的方法类名都不带点。
|
||||
|
||||
|
||||
**2、移除类样式：**
|
||||
|
||||
|
||||
```javascript
|
||||
$(selector).removeClass("liItem"); //为指定元素移除类 className
|
||||
$(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类
|
||||
```
|
||||
|
||||
**3、判断有没有类样式：**
|
||||
|
||||
```javascript
|
||||
$(selector).hasClass("liItem"); //判断指定元素是否包含类 className
|
||||
```
|
||||
|
||||
此时，会返回true或false。jquery对象中，只要有一个带有指定类名的就是true，所有都不带才是false。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
.current {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$("button").eq(0).click(function () {
|
||||
//添加类
|
||||
$("div").addClass("current");
|
||||
//判断类
|
||||
alert($("div").hasClass("current"));
|
||||
});
|
||||
|
||||
$("button").eq(1).click(function () {
|
||||
//删除类
|
||||
$("div").removeClass("current");
|
||||
//判断类
|
||||
alert($("div").hasClass("current"));
|
||||
});
|
||||
//alert($("div").hasClass("current"));//jquery对象中只要有一个带有类名的就是true，所有都不带才是false。
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button>添加</button>
|
||||
<button>删除</button>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="current"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
**4、切换类样式：**
|
||||
|
||||
```javascript
|
||||
$(selector).toggleClass(“liItem”); //为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
|
||||
```
|
||||
|
||||
解释：为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
|
||||
|
||||
如果采用采用正常的思路实现上面这句话，代码是：
|
||||
|
||||
|
||||
```javascript
|
||||
if($("div").hasClass("current")){
|
||||
//如果有类名，那么删除
|
||||
$("div").removeClass("current")
|
||||
}else{
|
||||
//如果没有类名，那么添加
|
||||
$("div").addClass("current")
|
||||
}
|
||||
```
|
||||
|
||||
现在有了toggleClass()方法，一行代码即可实现。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.current {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$("button").click(function () {
|
||||
//需求：点击按钮 ，切换背景
|
||||
//切换类（toggleCLass）
|
||||
$("div").toggleClass("current");
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button>切换背景</button>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
实现的效果：
|
||||
|
||||
20180205_1330.gif
|
||||
|
||||
|
||||
### 样式操作和类操作的比较
|
||||
|
||||
- 操作的样式非常少，那么可以通过`.css()`实现。
|
||||
|
||||
- 操作的样式很多，建议通过使用类 class 的方式来操作。
|
||||
|
||||
- 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。
|
||||
|
||||
|
||||
**举例**：addClass+removeClass
|
||||
|
||||
代码实现：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 1000px;
|
||||
height: 475px;
|
||||
margin: 0 auto;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
border: 1px solid #ddd;
|
||||
border-bottom: 0;
|
||||
height: 36px;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.tab li {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 80px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-top: 4px solid #fff;
|
||||
}
|
||||
|
||||
.tab span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
background: #ddd;
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.products {
|
||||
width: 1002px;
|
||||
border: 1px solid #ddd;
|
||||
height: 476px;
|
||||
}
|
||||
|
||||
.products .main {
|
||||
float: left;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.products .main.selected {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab li.active {
|
||||
border-color: red;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
jQuery(window).ready(function () {
|
||||
//需求:鼠标放到那个li上，让该li添加active类，下面的对应的.main的div添加selected
|
||||
$(".tab>li").mouseenter(function () {
|
||||
//不用判断，当前的li添加active类，其他的删除active类
|
||||
$(this).addClass("active").siblings("li").removeClass("active");
|
||||
//对应索引值的div添加selected类，其他的删除selected类
|
||||
//【重要】根据tab的索引值获取下方图片div的索引值
|
||||
$(".products>div").eq($(this).index()).addClass("selected").siblings("div").removeClass("selected");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<ul class="tab">
|
||||
<li class="tab-item active">国际大牌<span>◆</span></li>
|
||||
<li class="tab-item">国妆名牌<span>◆</span></li>
|
||||
<li class="tab-item">清洁用品<span>◆</span></li>
|
||||
<li class="tab-item">男士精品</li>
|
||||
</ul>
|
||||
<div class="products">
|
||||
<div class="main selected">
|
||||
<a href="###"><img src="images/guojidapai.jpg" alt=""/></a>
|
||||
</div>
|
||||
<div class="main">
|
||||
<a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>
|
||||
</div>
|
||||
<div class="main">
|
||||
<a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>
|
||||
</div>
|
||||
<div class="main">
|
||||
<a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
|
||||
上方代码中，我们注意，tab栏和下方图片栏的index值，一一对应，这里用得很巧妙。
|
||||
|
||||
效果：
|
||||
|
||||
20180205_1345.gif
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -17,6 +17,10 @@
|
||||
- [16年毕业的前端er在杭州求职ing](https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/27/8365670.html)
|
||||
|
||||
|
||||
### 2018-02-04
|
||||
|
||||
- [2018秋招前端总结](https://www.cnblogs.com/Mr-stockings/archive/2018/02/02/8407295.html)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user