我正在使用一个简单的顶部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

非常感谢!

最佳答案

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

然后$('ul li a').each(function() {...}将检查每个菜单项,尝试将url路径与菜单的href属性匹配,如果找到了match,则使该菜单项处于活动状态(添加了css active class),如果not match删除了活动班(如果有)。这应该够了吧。

(注意:假设您的应用不是单页应用)

对于单页应用程序,它要容易得多,先停用所有菜单项,然后再激活您单击的菜单项。



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

关于javascript - 更改CSS中事件的导航栏颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43521751/

10-12 12:38
查看更多