如何在导航栏元素处于活动状态时更改其背景颜色

问题描述 投票：0回答：2

首先尝试使用在线资源来解决这个问题。无法弄清楚。只是想让导航栏背景颜色在我点击它时发生变化，并且一旦新页面加载它就会处于活动状态。

几个对我来说最有意义的解决方案，但我不知道如何实施。

Javascript：

// Get the container element
var btnContainer = document.getElementById("myDIV");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

jQuery：

    <script>
        $(document).ready(function () {
            $('ul.navbar-nav > li').click(function (e) {
                $('ul.navbar-nav > li').css('background-color', 'transparent');
                $(this).css('background-color', '#c0c0c0');
            });
        });
    </script>

这是我的代码

HTML：

<!DOCTYPE html>
<html>
    
    <head>
        <script type="text/javascript" src="website.js"></script>
        <link rel="stylesheet" type="text/css" href="css.css" />
        <title> Why So Serious </title>
    </head>
    <body>
        <header>
            <h1><span> Why So Serious</span></h1>
        </header>
    </body>
    <nav class="navbar">
        <ul>
            <li><a href="goodnews.html">Goodnews</a></li>
            <li><a href="sport.html">Sport</a></li>
            <li><a href="style.html">Style</a></li>
            <li><a href="forum.html">Forum</a></li>
        </ul>
    </nav>

    


</html>

CSS：

* {
    margin: 0;
    padding: 0;
  }


h1 {text-align: center;
    font-size: 600% ;
    font-style: itaic;
    background: #33ACFF ;
    min-width: 100%;
    margin: 0%;
    padding: 0%;

}

/* top nav bar style and location */
.navbar ul {
    list-style-type: none;
    padding: 0%;
    margin: 0%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid black;
}

/* top nav bar options styling */
.navbar a {
    color: black;
    text-decoration: none;
    padding: 10px;
    font-family: sans-serif;
    text-transform: uppercase;
   
}

.navbar a:hover{
    background-color: black;
    color: white;

}

.navbar .active{
    background-color: black;
    color:white;
}
.navbar li{
    display: inline;
    
}
javascript html jquery css
2个回答
0
投票

您需要跟踪哪个项目处于活动状态。您可以通过在单击项目时为其设置“活动”类来实现此目的。您可以通过向每个项目添加事件侦听器来做到这一点。

const navItems = document.querySelectorAll('nav a')

navItems.forEach(item => {
  item.addEventListener('click', e => {
    item.classList.add('active')
  })
})

一旦元素上有活动类，您就可以使用 css 选择它并设置其样式：

a.active {
  background-color: ...
}

当我们在单击时添加活动类时，我们还需要删除任何以前添加的活动类。我们可以通过创建一个“clearActiveClass”函数并在设置新的活动类之前调用它来做到这一点。

function clearActiveClass () {
  navItems.forEach(item => {
    item.classList.remove('active')
  })
}

参见片段例如：

const navItems = document.querySelectorAll('nav a')

navItems.forEach(item => {
  item.addEventListener('click', e => {
    clearActiveClass()
    item.classList.add('active')
  })
})


function clearActiveClass () {
  navItems.forEach(item => {
    item.classList.remove('active')
  })
}
nav {
  background-color: #333;
  display: flex;
  justify-content: center;
}

a {
  color: #fff;
  display: block;
  padding: 5px 10px;
  text-decoration: none;
}

a:hover {
  background-color: rgba(255, 0, 0, 0.5);
}

a.active {
  background-color: rgba(255, 0, 0);
}
<nav>
  <a href="#" class="active">Home</a>
  <a href="#">About</a>
  <a href="#">FAQs</a>
  <a href="#">Contact</a>
</nav>

0
投票

首先，在 HTML 中，您需要包含 jQuery 和 JavaScript 文件的脚本标签。 @我发现的一点是，您应该将导航放置在标签内，就像文档正文的一部分一样。

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css.css" />
    <title>Why So Serious</title>
</head>
<body>
    <header>
        <h1><span>Why So Serious</span></h1>
    </header>
    <nav class="navbar">
        <ul>
            <li><a href="goodnews.html">Goodnews</a></li>
            <li><a href="sport.html">Sport</a></li>
            <li><a href="style.html">Style</a></li>
            <li><a href="forum.html">Forum</a></li>
        </ul>
    </nav>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="website.js"></script>
</body>
</html>

基于向链接添加“活动”类来构建脚本。

$(document).ready(function () {
    $('.navbar ul li a').click(function (e) {
        $('.navbar ul li a').removeClass('active');
        $(this).addClass('active');
    });
});

此外，在活动位置设置链接样式。

CSS：

* {
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    font-size: 600%;
    font-style: italic;
    background: #33ACFF;
    min-width: 100%;
    margin: 0%;
    padding: 0%;
}

.navbar ul {
    list-style-type: none;
    padding: 0%;
    margin: 0%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid black;
}

.navbar a {
    color: black;
    text-decoration: none;
    padding: 10px;
    font-family: sans-serif;
    text-transform: uppercase;
}

.navbar a:hover {
    background-color: black;
    color: white;
}

.navbar a.active {
    background-color: black;
    color: white;
}

.navbar li {
    display: inline;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.