zoukankan      html  css  js  c++  java
  • jquery实现导航栏头部点击变换颜色

    实现效果如下:

    话不多说直接上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            a{
                text-decoration: none;
                color: black;
            }
            #menu{
                 100%;
                height: 20px;
                background: gainsboro;
            }
            ul li{
                list-style: none;
                float: left;
                padding-left: 20px;
                background-color: whitesmoke;
            }
            .active {
                color: white;
                background-color: black;
            }
    
            .none {
                background-color: whitesmoke;
            }
        </style>
    </head>
    <body>
    <ul id="menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">直播</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">关于</a></li>
    </ul>
    <script src="../JQuery/js/jquery-3.0.0.min.js"></script>
    <script>
        $('#menu li a').click(function () {
            var f = this;
            $('#menu li a').each(function () {
                this.className = this == f ? 'active' : 'none'
            });
        });
    </script>
    
    </body>
    </html>
  • 相关阅读:
    React之JSX语法
    Visual Studio Code 使用 Typings 实现智能提示功能
    React.js 之hello word
    Linux命令详解-cd
    Linux命令详解-ls
    linux常用命令
    LINUX系统配置相关
    netsh
    Visual Studio
    乘法算术表
  • 原文地址:https://www.cnblogs.com/caozong/p/6269887.html
Copyright © 2011-2022 走看看