如何使用jQuery为li的active添加li类,并在悬停后留下

如何使用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>

输出
如何使用jQuery为li的active添加li类,并在悬停后留下

如何使用jQuery为li的active添加li类,并在悬停后留下

解释:在网络浏览器的控制台中检查输出。当光标悬停在列表项上时,我们在控制台中看到活动类被添加到列表项上。当光标悬停在外面时,活动类从最近悬停的项目上移走,并添加到下一个项目上。

  • 第二种方法。在第二种方法中,我们添加了表示已经列表项的外功能。在这里,活动类在鼠标进入时被添加,在鼠标离开时被移除。当鼠标离开事件被触发时,被访问的类被添加到最近访问的列表项中。
    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>

输出
如何使用jQuery为li的active添加li类,并在悬停后留下

解释:在网络浏览器的控制台中检查输出。当光标悬停在列表项上时,我们在控制台中看到活动类被添加到列表项2中。同时,列表项1以前被访问过,因此访问类被添加到它,并且根据CSS样式表中访问类的规格,项目的颜色变成紫色。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程