Question

我一直在阅读，人们建议只使用CSS来更改当前页面导航栏链接背景颜色，但我不知道如何可能，因为CSS是静态的，我将无法添加/删除{{ 1}}关于链接的课程？所以现在我正在使用JS / jquery尝试添加/删除基于click的类，但是当我点击时网站刷新并且没有保存任何东西，所以我添加/删除的类没有做任何事情。有人可以指导我正确的方向吗？示例：我单击我给你的HTML的最后一个链接，但它只会转到该站点，因为所有内容都刷新到新站点，后台不会改变。

HTML

.currentlink

CSS

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

JS

.greybackground {
background: #E6E6E6;
}

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

这是javascript改变活动链接的bg颜色

 $("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

香草JS（HTML，CSS）中的解决方案。

导航栏项目必须位于.navlinks类中

在当前链接类下添加样式。

<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 个答案: