0

我一直在阅读，人们只推荐 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');
});
4

3 回答 3

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;
}

这是更改活动链接的背景颜色的 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

于 2017-10-29T08:38:24.947 回答
0

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

  1. 出现在每一页上
  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 标签）“匹配”到相应的菜单项，并将您的背景类添加到该菜单项。

于 2017-10-29T08:58:27.613 回答
0

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>
于 2020-07-02T11:52:43.960 回答