Question

我正在使用一个简单的顶级css导航栏（只是一个css和html，没有bootstrap /其他框架），我想更改活动页面。因此，当我转到主页时，导航栏中的按钮颜色会变为红色/无论如何，当我转到另一页时......

这里是代码：

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

非常感谢！

Answer 1

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

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

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

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

＆＃13;

$(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');
    }
  });

});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试下面的活动菜单代码

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

Answer 3

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

<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，则必须手动执行此操作。

Answer 4

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

点击导航链接添加css类：

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

为活动课程添加CSS

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

Answer 5

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/

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

Answer 7

一种可能的方法是在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');
});

Answer 8

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

这是一个jQuery选项，它查看页面URL（window.location），特别是你在.indexOf中定义的字符串（“在这里添加一个唯一的字符串”）并询问是否该字符串大于-1，然后使用您指定给它的类找到li元素，并添加另一个名为active的类。

在示例中，我正在使用“display”，因为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，请告诉我，但这是最容易实现的解决方案，并允许您轻松修改

Answer 9

您可以尝试在CSS文件中使用单独的类，例如＆＃34; ul-home，＆＃34; ＆＃34; UL-消息，＆＃34;等，并为每个颜色定义不同的背景颜色，然后只需在每个页面上设置<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>

等。与你拥有的所有其他页面一起。

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

9 个答案: