点击后给导航添加样式

使用原生js给导航添加样式。

点击后给导航添加样式示例

步骤:
1. 写好点击后要添加的样式。
2. 获取所有导航。通过querySelectorAll获取所有的导航。
3. 可以使用forEach给拿到每一个导航。
4. 添加点击事件。通过addEventListener给导航添加点击事件。
5. 移除类。通过querySelectorclasslistremove()
6. 添加类。通过classlistadd() 给当前点击的导航添加类。

DOCTYPE html>
<html lang="en">

<style>
    nav {
      background-color: #C9E6E2;
      padding: 10px;
      width: 100%;
      z-index: 1;
      display: flex;
      align-items: center;
    }
    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      display: flex;
    }
    nav a {
      display: block;
      color: #FFFFFF;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    nav a.active {
      background-color: rgba(255, 255, 255, .5);
      color: #E4B8C4;
    }
style>
<body>
    <nav>
        <div>LOGOdiv>
        <ul>
            <li><a class="active" href="#book">booka>li>
            <li><a href="#music">musica>li>
            <li><a href="#video">videoa>li>
            <li><a href="#video">gamea>li>
        ul>
        <div>about usdiv>
    nav>
body>
<script>
    // 获取导航栏中所有的链接
    let navLinks = document.querySelectorAll('nav ul a');
    // 为每一个链接添加点击事件处理程序
    navLinks.forEach(function(link){
        link.addEventListener('click',function(){
            // 移除当前选中链接的active类
            document.querySelector('nav ul a.active').classList.remove('active');
            // 将被点击的链接添加active类
            link.classList.add('active');
        })
    })
script>
html>

你可能感兴趣的:(前端小功能,javascript)