如何使用jQuery为li的active添加li类,并在悬停后留下
Bootstrap 4是一个开源的CSS框架,用于网络应用的前端开发。jQuery是一个用于执行Javascript功能的Javascript框架,它的功能与javascript相似,但唯一的区别是jQuery包含的代码行数更少。使用jQuery和CSS,我们可以写一段代码,演示当光标悬停在列表项上时增加活动类,随后当光标移出时删除活动类。
- 第一种方法。在第一种方法中,我们使用jQuery的hover()方法。hover()方法触发或注册了mouseenter和mouseleave两个事件。hover()方法需要两个函数作为参数。第一个参数是当鼠标进入选定的项目时必须触发的infunction,第二个参数是当鼠标离开选定的项目时必须执行的outfunction。第一个参数是必须的,而第二个参数是可选的。在这个例子中,我们只指定了infunction。如果只指定了一个函数,它就会对mouseenter和mouseleave事件都运行。此外,toggleClass()方法还可以切换活动类,即如果
<li>
项目中没有活动类,就添加活动类,否则就删除活动类。
语法:
hover(infunction, outfunction)
示例:
<!DOCTYPE html>
<html>
<head>
<!-- CSS only -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous" />
<!-- JS, Popper.js, jquery -->
<script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<!--CSS stylesheet-->
<style type="text/css">
.active,
li:hover {
color: red;
}
</style>
</head>
<body>
<ul>
<!--list items without the
active class initially-->
<li class="li">Item 1</li>
<li class="li">Item 2</li>
<li class="li">Item 3</li>
</ul>
<!-- javascript function to add the active
class to list when hovered over -->
<script type="text/javascript">
(".li").hover(function () {
//toggleClass() switches the active class
(this).toggleClass("active");
});
</script>
</body>
</html>
输出
解释:在网络浏览器的控制台中检查输出。当光标悬停在列表项上时,我们在控制台中看到活动类被添加到列表项上。当光标悬停在外面时,活动类从最近悬停的项目上移走,并添加到下一个项目上。
- 第二种方法。在第二种方法中,我们添加了表示已经列表项的外功能。在这里,活动类在鼠标进入时被添加,在鼠标离开时被移除。当鼠标离开事件被触发时,被访问的类被添加到最近访问的列表项中。
html <!DOCTYPE html>
<html>
<head>
<!-- CSS only -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous" />
<!-- JS, Popper.js, jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<!--CSS stylesheet-->
<style type="text/css">
.active,
li:hover {
color: red;
}
.visited {
color: violet;
}
</style>
</head>
<body>
<ul>
<!--list items without the
active class initially-->
<li class="li">Item 1</li>
<li class="li">Item 2</li>
<li class="li">Item 3</li>
</ul>
<!-- javascript function to add the active
class to list when hovered over -->
<script type="text/javascript">
(".li").hover(
function () {
//toggleClass() switches the active class
(this).toggleClass("active");
},
function () {
$(this).addClass("visited");
}
);
</script>
</body>
</html>
输出
解释:在网络浏览器的控制台中检查输出。当光标悬停在列表项上时,我们在控制台中看到活动类被添加到列表项2中。同时,列表项1以前被访问过,因此访问类被添加到它,并且根据CSS样式表中访问类的规格,项目的颜色变成紫色。