jQuery基础之jQuery和原生js实现tab选项卡和电影排行榜
相关知识点
$("li").mouseenter()和 $("li").mouseleave()与("li").hover()
$(this).addClass("current");//添加样式
$(".content>li").eq(index);//选择一个jQuery对象，还有一个get方法一样，不过get方法会返回一个节点，就不能用jQuery操作了
$li.removeClass("show");// 移除演示
$(this).siblings().removeClass("current");//选择除了自己之外的兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab选项卡</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 440px;
height: 298px;
border: 1px solid #000;
margin: 50px auto;
}
.nav>li {
list-style: none;
width: 110px;
height: 50px;
background: orange;
text-align: center;
line-height: 50px;
float: left;
}
.nav>.current {
background: #ccc;
}
img {
display: block;
width: 440px
}
.content>li {
list-style: none;
display: none;
}
.content>.show {
display: block;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
//第一种方法，但有缺陷，移出后所有样式都将消失
// $(function() {
// // 1.监听选项卡的移入事件
// $(".nav>li").mouseenter(function () {
// // 1.1修改被移入选项卡的背景颜色
// $(this).addClass("current");
// // 1.2获取当前移入选项卡的索引
// var index = $(this).index();
// // 1.3根据索引找到对应的图片
// var li = $(".content>li").eq(index);
// // 1.4显示找到的图片
// li.addClass("show");
// });
// // 1.监听选项卡的移出事件
// $(".nav>li").mouseleave(function () {
// // 1.1还原选项卡的背景颜色
// $(this).removeClass("current");
// // 1.2获取当前移出选项卡的索引
// var index = $(this).index();
// // 1.3根据索引找到对应的图片
// var $li = $(".content>li").eq(index);
// // 1.4隐藏对应的图片
// $li.removeClass("show");
// });
// })
//第一种方法,正常
// $(function() {
// // 1.监听选项卡的移入事件
// $(".nav>li").mouseenter(function() {
// // 1.1修改被移入选项卡的背景颜色
// $(this).addClass("current");
// // 1.2还原其它兄弟选项卡的背景颜色
// $(this).siblings().removeClass("current");
// // 1.3获取当前移出选项卡的索引
// var index = $(this).index();
// // 1.4根据索引找到对应的图片
// var $li = $(".content>li").eq(index);
// // 1.5隐藏非当前的其它图片
// $li.siblings().removeClass("show");
// // 1.6显示对应的图片
// $li.addClass("show");
// });
// })
//使用原生js
window.onload = function() {
var navLi = document.getElementsByClassName("nav")[0].getElementsByTagName('li');
var contentLi = document.getElementsByClassName("content")[0].getElementsByTagName('li');
for (var i = 0; i < navLi.length; i++) {
navLi.index=i;
navLi[i].onmouseenter = function() {
for (var i = 0; i < navLi.length; i++) {
navLi[i].className="";
this.className="current";
}
for (var i = 0; i < contentLi.length; i++) {
contentLi[i].className="";
contentLi[navLi.index].className="show"
}
console.log(this.innerHTML);
}
}
}
</script>
</head>
<body>
<div class="box">
<ul class="nav">
<li class="current">demo1</li>
<li>demo2</li>
<li>demo3</li>
<li>demo4</li>
</ul>
<ul class="content">
<li class="show"><img src="img/demo (6).png" alt="" srcset=""></li>
<li><img src="img/demo (7).png" alt="" srcset=""></li>
<li><img src="img/demo (8).png" alt="" srcset=""></li>
<li><img src="img/demo (9).png" alt="" srcset=""></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>电影排行榜</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 500px;
margin: 50px auto;
border: 1px solid #000;
}
.box>h1 {
font-size: 20px;
padding-left: 10px;
}
.content>img {
width: 80px;
height: 120px;
float: left;
overflow: hidden;
}
.content>p {
width: 180px;
height: 120px;
float: left;
margin-left: 10px;
font-size: 12px;
line-height: 20px;
}
.content {
overflow: hidden;
margin-top: 5px;
display: none;
}
li {
list-style: none;
padding: 5px 10px;
border: 1px dashed #ccc;
cursor: pointer;
}
.box span {
margin-right: 5px;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: #ccc;
}
ul>li:nth-child(-n+3) span {
background: deeppink;
}
.current .content {
display: block;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
//使用jQuery方式
$(function() {
//方法一
// 1.监听li的移入事件
// $("li").mouseenter(function() {
// $(this).addClass("current");
// })
// // 1.监听li的移出事件
// $("li").mouseleave(function() {
// $(this).removeClass("current")
// })
//方法二
// $("li").hover(function() {
// $(this).addClass("current")
// }, function() {
// $(this).removeClass("current")
// })
//方法三,只是会留下当前所对应的内容不会消失，这是和上面的区别
// $("li").mouseenter(function() {
// $(this).addClass("current");
// $(this).siblings().removeClass("current")
// })
})
//使用原生js
window.onload = function() {
var oLi = document.getElementsByClassName("box")[0].getElementsByTagName('li');
//方法一
// for (var i = 0; i < oLi.length; i++) {
// oLi[i].onmouseenter = function() {
// this.className = "current";
// }
// oLi[i].onmouseleave = function() {
// this.className = "";
// }
// }
//方法二，只是会留下当前所对应的内容不会消失，这是和上面的区别
for (var i = 0; i < oLi.length; i++) {
oLi[i].index = i;
oLi[i].onmouseenter = function() {
this.className = "current";
console.log(siblingsOf(oLi[this.index]));//(5) [li, li, li, li, li]
//除当前元素外全部隐藏
for(var n=0;n< siblingsOf(oLi[this.index]).length;n++){
siblingsOf(oLi[this.index])[n].className="";
}
}
}
//函数为 获的除自身之外的所有兄弟节点
function siblingsOf(elem) {
var len = 0;
var children = elem.parentNode.childNodes; //获取目标元素的所有兄弟元素和它自身
var siblings = new Array();
for (var i = 0, len = children.length; i < len; i++) {
//判断此元素是一个元素节点而且不是调用元素的本身
//若为真放进数组里面
if (children[i] != elem) {
siblings.push(children[i]);
}
}
//返回最后得出的结果数组
return siblings;
}
}
</script>
<body>
<div class="box">
<h1>电影排行榜</h1>
<ul>
<li><span>1</span>demo
<div class="content">
<img src="img/demo (1).png" alt="">
<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
</div>
</li>
<li><span>2</span>demo
<div class="content">
<img src="img/demo (1).png" alt="">
<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
</div>
</li>
<li><span>3</span>demo
<div class="content">
<img src="img/demo (1).png" alt="">
<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
</div>
</li>
<li><span>4</span>demo
<div class="content">
<img src="img/demo (1).png" alt="">
<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
</div>
</li>
<li><span>5</span>demo
<div class="content">
<img src="img/demo (1).png" alt="">
<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
</div>
</li>
<li><span>6</span>demo
<div class="content">
<img src="img/demo (1).png" alt="">
<p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>
</div>
</li>
</ul>
</div>
</body>
</html>
