程序员的知识教程库

网站首页 > 教程分享 正文

小白都能看懂学会的移入移除操作（移除和移出）

henian88 2024-10-17 09:33:28 教程分享 2 ℃ 0 评论

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>36 jQuery tab选项卡</title>

<style type="text/css"> /*css样式 开始*/

*{ /*通配符，所有的*/

margin: 0; /*外边距：0*/

padding: 0; /*内边距：0*/


}

.box{ /*class="box"的div盒子*/

width: 448px; /*宽：448像素*/

height: 298px; /*高 ：298像素*/

border: #000000 solid 1px; /*边框：黑色 实线 1像素*/

margin: 50px auto; /*外边距 ： 上下：50像素 左右：自动（就是居中）*/

}

.nav>li{ /* class="nav"的ul标签里面的li标签样式 */

list-style: none; /* 去除li前面的点 */

width: 110px; /*宽110像素*/

height: 50px; /*高：50像素*/

float: left; /*浮动布局：左浮动*/

background: orange; /*背景颜色：橘黄色*/

text-align: center; /* 文本的水平对齐方式：居中 */

line-height: 50px; /* 行高：50像素 */

border: #000000 solid 1px; /*边框：黑色 实线 1像素*/

}

.tupian>li{ /*class="tupian"的ul标签里面的li标签样式*/

list-style: none; /*去除li标签前面的点*/

width: 445px; /* 宽：445像素*/

height: 245px; /* 高：245像素*/

display: none; /* 标签隐藏 */


}

.tupian>li>img{ /* class="tupian"的ul标签里面的img标签样式 */

height: 245px; /* 高：245像素 */

width: 445px; /* 宽：445像素 */

}

.tupian .show{ /* class="tupian"的ul里面的class="show"的li标签的样式 */

display: block; /* 标签显示，， 之前隐藏了， 只要加了class名字是show的就是这个样式 */

}

.nav .current{ /*class="nav"的ul标签里面的li标签的class=“current”的样式*/

background: #948889; /*背景颜色为灰色*/

}

/*css样式结束*/

</style>

<script src="../static/js/jquery-3.6.0.js"></script>

<script>

$(function(){

// 1 监听选项卡的移入移出事件

// $(".nav>li").hover(function(){

// //修改被移入选项卡的背景颜色

// $(this).addClass("current")

// //获取当前移入选项卡的索引，也就是第几个li标签

// var $index = $(this).index()

// // console.log($(this).index()) // 打印当前li标签的索引号

// var $li = $(".tupian>li").eq($index) // .eq()就是当前选择的jQuery对象

// $li.addClass("show") // 为图片的li标签添加一个class，名字为show， 这样就能显示图片了

// }, function(){

// // 移出选项卡时还原背景颜色，就是把添加的删除了

// $(this).removeClass("current")

// var $index = $(this).index()

// // console.log($(this).index()) // 打印当前li标签的索引号

// var $li = $(".tupian>li").eq($index) // .eq()就是当前选择的jQuery对象

// $li.removeClass("show") // // 为图片的li标签删除一个class，名字为show， 这样显示的图片就不显示了

// })


// 1 监听选项卡的移入移出事件

$(".nav>li").mouseenter(function(){

// 修改被移入选项卡的背景颜色，也就是给要修改的li标签加一个class名字

$(this).addClass("current")

// 选中除了当前选中的li标签的其他li标签，把其他li标签的class名字都删除掉

$(this).siblings().removeClass("current")

//获取当前移入选项卡的索引，也就是第几个li标签

var $index = $(this).index()

//.eq()就是当前选择的jQuery对象

var $li = $(".tupian>li").eq($index)

// 为当前选中的对象添加class名字叫show

$li.addClass("show")

// 为当前没有选中的对象删除class名字show

$li.siblings().removeClass("show")

})



})

</script>

</head>

<!-- 上面是网页的头部 -->


<!-- 下面是身体部分 -->

<body>

<div class="box">

<ul class="nav">

<li>苹果</li>

<li>香蕉</li>

<li>橘子</li>

<li>西瓜</li>

</ul>

<ul class="tupian">

<li class="show"><img src="../static/image/apple.jpg"></li>

<li><img src="../static/image/xiangjiao.jpg"></li>

<li><img src="../static/image/orange.jpg"></li>

<li><img src="../static/image/xigua.jpg"></li>

</ul>


</div>

</body>

</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表