(html/css/javascript) 尝试将导航栏中的当前页面链接设为不同颜色

Question

我一直在阅读，人们只推荐 CSS 来更改当前页面导航栏链接的背景颜色，但我不明白这是怎么可能的，因为 CSS 是静态的，我将无法添加/删除.currentlink类链接？ 所以现在我正在使用 JS/jquery 尝试基于点击添加/删除类，但是当我点击时站点刷新并且没有保存任何内容，因此我添加/删除的类不执行任何操作。 有人可以指导我正确的方向吗？ 示例：我单击给您的 HTML 的最后一个链接，但它只会转到该站点，并且由于所有内容都会刷新到新站点，因此背景不会改变。

HTML

    <nav class="clearfix">

        <a href="#">home</a> 
        <a href="#">about us</a> 
        <a href="#">tour</a>
        <a href="index.html">flickr search</a>

    <div class="rightnav">
        <a href="#">Sign Up</a>
        <a href="#">Log In</a>
    </div>

    </nav>

CSS

.greybackground {
background: #E6E6E6;
}

JS

$('nav a').on('click', function(){
    $('nav a').removeClass('greybackground');
    $(this).addClass('greybackground');
});

Answer 1

如果您正在创建多页网站并希望更改每个页面上的链接颜色，只需创建一个具有特定 css 属性的类并将此类添加到每个页面上的相应导航栏链接。 确保在任何页面上，类必须仅添加到相应的页面链接。

如果您正在寻找以下代码的单页网站解决方案，则任何方法都可以正常工作

这是简单导航栏的 html css 代码

<h1>navbar</h1>
   <li><a href="#" class="link">Home</a></li>
   <li><a href="#" class="link">Products</a></li>
   <li><a href="#" class="link">About us</a></li>
   <li><a href="#" class="link">Contact</a></li>
   <button>Log in</button>
 </ul>

a{
 background-color:black;
 padding:10px;
 text-decoration:none;
 color:white;
}

li{
 margin:30px;
 display:inline;
 }

ul{
 list-style-type: none;
 }

.transform{
 background-color:red;
 }

 button{
  background-color:green;
  padding:10px;
  color:white;
}

这是用于更改活动链接的 bg 颜色的 javascript

 $("a.link").click(function(){
  $("a.link").css("background-color", "black");
  $(this).css("background-color", "red");
 });

只需为每个导航栏链接添加类“.link”，当用户单击应用于该链接的任何导航栏链接 css 属性广告时，所有其他链接都会将其 bg 颜色更改为无。 我希望它有帮助

https://codepen.io/pranjalkoshti/pen/GMarvj

Answer 2

实现这一目标的最简单方法是确定一个元素

出现在每一页上
您可以将标记添加到

例如，您的整体内容的 div。

如果将以下内容添加到 div ：

<div id="content" data-currentpage="about">

这将唯一标识页面。

并为每个菜单项添加一个匹配的类：

<li><a href="#" class="link" class="home">Home</a></li>
<li><a href="#" class="link" class="products">Products</a></li>
<li><a href="#" class="link" class="about">About us</a></li>
<li><a href="#" class="link" class="contact">Contact</a></li>

因此，在页面就绪（ jQuery(document).ready(function(){...) 运行以下代码：

// -- Find the pages 'data' tag --
var currentPage = jQuery('#content').data('currentPage');
// -- Add a dot to turn it into a class identifier --
currentPage = '.' + currentPage;
// -- Add a background class to to the menu item with that class --
jQuery(currentPage).addClass('greybackground');

这会将每个页面（通过 data-currentpage 标签）“匹配”到相应的菜单项，并将您的背景类添加到该菜单项。

Answer 3

vanilla JS（HTML、CSS）中的解决方案。

导航栏项目需要在类 .navlinks 中

在类 current-link 下添加样式。

<html>
    <nav>
        <ul>
            <li class="navlinks"></li>
            <li class="navlinks"></li>
        </ul>
    </nav>
</html>

<style>
.current-link {
      background-color: red;
}
</style>

<script>
  let links = document.getElementsByClassName("navlinks");
  for(let i = 0;i < links.length;i++){
    if (links[i].href.replace(/\/$/, '') == ocument.URL.replace(/\/$/, '')){
      links[i].classList.add("current-link");
    }
  }
</script>

(html/css/javascript) 尝试将导航栏中的当前页面链接设为不同颜色

问题描述

3 个解决方案

解决方案1
1 2017-10-29 08:38:24

解决方案2
0 2017-10-29 08:58:27

解决方案3
0 2020-07-02 11:52:43

(html/css/javascript) 尝试将导航栏中的当前页面链接设为不同颜色

问题描述

3 个解决方案

解决方案1 1 2017-10-29 08:38:24

解决方案2 0 2017-10-29 08:58:27

解决方案3 0 2020-07-02 11:52:43

解决方案1
1 2017-10-29 08:38:24

解决方案2
0 2017-10-29 08:58:27

解决方案3
0 2020-07-02 11:52:43