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