老師檢查一下 是不是因为使用了this就可以不用定义eq($(this).index())呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.container {
width: 240px;
height: 185px;
margin: 0 auto;
overflow: hidden;
}
.conTitle {
height: 50px;
}
nav {
width: 25%;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
background-color: #000;
font-weight: bold;
color: #fff;
cursor: pointer;
}
nav:hover {
/* background-color: #ddd;
color: #000; */
}
.content {
position: relative;
}
.img1 {
opacity: 1;
}
img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 240px;
}
</style>
</head>
<body>
<div class="container">
<div class="conTitle">
<nav>动漫</nav>
<nav>动画</nav>
<nav>vue</nav>
<nav>小程序</nav>
</div>
<div class="content">
<img class="img1" src="img/1.jpg" />
<img class="img2" src="img/2.jpg" />
<img class="img3" src="img/3.jpg" />
<img class="img4" src="img/4.jpg" />
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("nav").click(function () {
// 此处写代码
// $(this).index();找到img当前的下标
$("img")
.eq($(this) .index())
.css({ "opacity": "1" })
.siblings()
.css({ "opacity": "0" });
// 改变当前背景颜色
$(this)
.css({ "backgroundColor": "skyblue" })
.siblings()
.css({ "backgroundColor": "#000" });
});
})
</script>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，选项卡这里是因为$(this)指向当前选中的选项卡nav。所以可以直接使用$(this)设置选中的背景为蓝色， 然后通过siblings()找到其他的选项卡将背景设置为黑色。
但是$(this)不可以直接表示图片， 所以需要先通过$(this).index()获得当前选卡的索引。 然后通过$(img).eq($(this).index())获取对应的图片显示出来，并将其他的图片隐藏起来，实现效果。
同学可以尝试输出一下$(this)和$(img).eq($(this).index())。查看一下输出结果哦
打印结果
可以自己下去测试一下， 加深理解
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星