更改css中的活动导航栏颜色答案

【问题标题】：Change the active navbar color in css更改css中的活动导航栏颜色
【发布时间】：2017-04-20 14:01:52
【问题描述】：

我正在使用一个简单的顶部 css 导航栏（只是一个 css 和 html，没有引导程序/其他框架），我想更改活动页面。因此，当我转到主页时，导航栏中的按钮颜色变为红色/其他，同样当我转到其他页面时...

这里是代码：

body {
  margin: 0;
}

.logo {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
  float: left;
  width: 25%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 18px;
}

li a:hover {
  background-color: #111;
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Division</a></li>
  <li><a href="#">Career</a></li>
  <li><a href="#">MChoice's</a></li>
</ul>

你有什么想法吗？添加javascript就可以了

非常感谢！

【问题讨论】：

你用的是什么服务器？如果可能的话，在服务器端使用 css-class 标记导航条目之一要容易得多。
Add ".active" class to the current page's link in a menu using jQuery or PHP的可能重复
如何将导航添加到每个页面？它是模板的一部分还是每个页面都单独编程？如果是模板，是静态html还是通过服务器端语言改变？
你的app是单页应用吗？当您单击菜单时，您会重定向到另一个 url，或者您停留在同一页面？
这只是我学校的作业，我不会上传到服务器

标签： javascript html css

【解决方案1】：

我在这里所做的是$(document).ready(function() {..} 使用var url = window.location.pathname; 获取路径，因此您知道用户来自哪个链接，因此您知道他们单击了哪个菜单项。

然后$('ul li a').each(function() {...}将检查每个菜单项，尝试将url路径与菜单的href属性匹配，如果找到match，则使该菜单项处于活动状态（添加css活动类），如果@987654326 @ 如果有的话，删除活动类。这应该可以解决问题。

（注意：假设您的应用不是单页应用）

对于单页应用程序，它更容易，停用所有菜单项，然后激活您点击的那个。

$(document).ready(function() {
  //var url = window.location.pathname;
  var url = 'http://stacksnippets.net/js#division';
  console.log('url-->', url);

  $('ul li a').each(function() {
    var href = $(this).attr('href');
    if (!!url.match(href)) {
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });

});

body {
  margin: 0;
}

.logo {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
  float: left;
  width: 25%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 18px;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#division">Division</a></li>
  <li><a href="#career">Career</a></li>
  <li><a href="#mchoices">MChoice's</a></li>
</ul>

【讨论】：

这会是单页应用吗？
@hungerstar 是的，我稍后会添加另一种方法
我认为您最好使用window.location.pathname 或window.location.hash。 href 是一个完整的 URL，它可能与 href 属性中的值不匹配。
@da'geeks 检查我的解决方案，使用 jQuery，您可以动态完成。它会获取您来自的 url，然后与导航菜单 href 匹配，如果找到匹配项，则激活该项目，否则将其删除

【解决方案2】：

最简单的解决方案是在您所在页面的链接中添加一个活动类：

<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Division</a></li>
  <li><a href="#">Career</a></li>
  <li><a href="#">MChoice's</a></li>
</ul>

然后相应地设置该类的样式：

li a.active {
    background: #F00;
}

如果您使用的是 CMS（Wordpress 等），通常可以在活动链接上添加某种活动类。如果您正在制作自己的静态 HTML，则必须手动完成。

【讨论】：

【解决方案3】：

试试下面的激活菜单代码

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('li a').on('click', function(){
      $('li a').removeClass('active');
      $(this).addClass('active');
    }); 
});
</script>

<style type="text/css">
body {
  margin: 0;
}

.logo {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
  float: left;
  width: 25%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 18px;
}

li a:hover, li a.active {
  background-color: #111;
}

</style>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Division</a></li>
  <li><a href="#">Career</a></li>
  <li><a href="#">MChoice's</a></li>
</ul>

【讨论】：

您所做的只是为元素添加一个活动类。您还没有解决在 SPA 中从一个页面导航到另一个页面或从一个页面的一个部分导航到另一个页面的另一个部分时如何执行此操作。

【解决方案4】：

要更改导航中活动链接的颜色，您需要执行以下操作：

点击导航链接添加css类：

$('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});

为活动类添加 CSS

ul li a.active {
    background-color: #f4f4f4;
}

【讨论】：

这会是单页应用吗？
是的，您可以将其用于单页应用程序

【解决方案5】：

一种可能的方法是在 CSS 中使用活动选择器。此选择器在单击时突出显示您正在使用的活动元素。

a:active { 
    background-color: yellow;
}

a:focus { 
    background-color: yellow;
}

您也可以使用一些 JQuery 来打开和关闭它。试试看这里的这篇文章，我想你可能已经得到了答案。

（与How to keep :active css style after clicking an element相关）

jQuery('button').click(function(){
   jQuery(this).toggleClass('active');
});

【讨论】：

【解决方案6】：

function redButtons() {

  $(".inclusive-buttons").on("click", "a", function() {
    $(".inclusive-buttons a").css("background", "#333");
    $(this).css("background", "red");
  })
  
}

var x = document.getElementsByTagName("li");
x.onclick = redButtons();

body {
  margin: 0;
}

.logo {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2f2f2;
  float: left;
  width: 25%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 18px;
}

li a:hover {
  background-color: #111;
}
a:active { 
    background-color: red;
}

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<ul class="inclusive-buttons">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Division</a></li>
  <li><a href="#">Career</a></li>
  <li><a href="#">MChoice's</a></li>
</ul>

https://jsfiddle.net/m5gm7x7e/2/

【讨论】：

添加/删除 CSS 类会比直接应用内联 CSS 更灵活。
@hungerstar- 很抱歉给出了错误的解决方案，我会纠正它。
不是错，只是不够灵活。通过使用 CSS 类，您不必深入研究 JS 并可能像您所做的那样替换两个颜色值。相反，如果需要更改颜色，您可以更改 CSS 中的单个值。

【解决方案7】：

HTML 部分

 <div class="navbar">
    <div class="navbar-fixed-top">
       <div class="container" style="width: auto;">
          <div class="nav-collapse" id="nav-collapse">
             <ul class="nav" id="nav">
                 <li id="News"><a href="#News">News</a></li>
                 <li id="Contact"><a href="#Contact">Contact</a></li>
                 <li id="About"><a href="#About">About</a></li>
                 <li id="Division"><a href="#Division">Division</a></li>
                 <li id="Career"><a href="#Career">Career</a></li>
                 <li id="skill"><a href="#skill">Skill</a></li>
                 <li id="research"><a href="#research">Research</a></li>
                 <li id="MChoice"><a href="#MChoice">MChoice's</a></li>                     
             </ul>
          </div>
       </div>
    </div>
 </div>

JavaScript 部分

$(function() {
        $('#nav li a').click(function() {
           $('#nav li').removeClass();
           $($(this).attr('href')).addClass('active');
        });
     });

CSS 部分

.navbar #nav > .active > a {
    color: yellow;
}

这里是JSFiddle 结果

http://jsfiddle.net/Ag47D/775/

【讨论】：

之前谢谢，但我不允许使用引导程序/其他框架，如果它只是一个 css 和 html，我该怎么办？我在这个论坛上得到了一些答案，我会一一尝试。我只是在 css 中放了一些活动类，并使用 javascript 或其他什么使其更具动态性？

【解决方案8】：

这是一个 JSFiddle：https://jsfiddle.net/timhjellum/nw3n7eka/103/

这是一个 jQuery 选项，它查看页面 URL (window.location)，特别是您在 .indexOf(" add a unique string here ") 中定义的字符串，并询问是否该字符串大于 -1，然后使用您分配给它的类找到 li 元素，并添加另一个名为 active 的类。

在示例中，我使用“显示”，因为 JSFiddle 使用的 iFrame 的 URL 所以希望这不会造成混淆。

这是导航：

$(document).ready(function () {
     if(window.location.href.indexOf("home") > -1) {
         $(".home").addClass("active");
     }
     if(window.location.href.indexOf("display") > -1) {
         $(".news").addClass("active");
     }
     //make one for each nav element
});

HTML 需要修改如下：

<ul>
  <li class="home"><a href="index">Home</a></li>
  <li class="news"><a href="display">News</a></li>
  <li class="contact"><a href="contact">Contact</a></li>
  <li class="about"><a href="about">About</a></li>
</ul>

然后是一个简单的css添加：

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

如果您不能使用 jQuery，请告诉我，但这是最简单的解决方案，您可以轻松地进行修改

【讨论】：

【解决方案9】：

您可以尝试在您的 CSS 文件中使用单独的类，例如“ul-home”、“ul-news”等，并为每个类定义不同的背景颜色，然后只需在每个类上为您的 <ul> 标签设置类页面以匹配您想要的课程。所以：

.ul-home {
    background-color: red;
}
.ul-news {
    backrgound-color: yellow;
}

然后在您的主页上：

<ul class="ul-home>
    <li>Home</li>
    <li>News</li>
</ul>

在您的新闻页面上：

<ul class="ul-news">
    <li>Home</li>
    <li>News</li>
</ul>

等等。与您拥有的所有其他页面。

【讨论】：

这会改变整个导航栏的背景。我相信 OP 希望更改单个导航项的背景。