嗨，我一直在编写一些基本的 html + css 来制作导航栏，我决定尝试将 JS 合并到导航栏中，该导航栏会显示“如果单击“测试”，则转到“测试”页面，然后保持所选页面上的颜色变化” 我正在考虑做一个开关或其他什么，但我不太确定该怎么做。 http://jsfiddle.net/3jp1d0fe/1/
html
<body>
<div class="container">
<div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a></div>
<div class="column"><a href="https://www.google.co.uk"> Design</a></div>
<div class="column"><a href="https://www.google.co.uk"> Build</a></div>
<div class="column"><a href="https://www.google.co.uk"> Deploy</a></div>
<div class="column"><a href="https://www.google.co.uk"> Test</a></div>
<div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a></div>
</div>
</body>
CSS
div.container {
display: table;
display: table-row;
}
div.column {
display: table-cell;
vertical-align:middle;
text-align:center;
background-color:#c2ad80;
}
div.column a {
color:white;
font-family: Arial;
font-size: 12px;
text-decoration:none;
display:block;
height:100px;
width:100px;
display: table-cell;
vertical-align: middle;
}
div.column:hover {
background-color: #a2884f;
}
最佳答案
我猜你正在寻找这样的东西:
- 创建一个具有悬停状态的类。
- 单击该事件以设置类别时添加一个事件。
- 在每个页面中，您需要将
current类添加到.column中，以使其在您登陆页面时保持事件状态。
$(function () {
$(".column a").click(function () {
$(".current").removeClass("current");
$(this).closest(".column").addClass("current");
return false;
});
url = location.pathname.substr(1);
$('a[href="' + url + '"]').closest(".column").addClass("current");
});div.container {
display: table;
display: table-row;
}
div.column {
display: table-cell;
vertical-align:middle;
text-align:center;
background-color:#c2ad80;
}
div.column a {
color:white;
font-family: Arial;
font-size: 12px;
text-decoration:none;
display:block;
height:100px;
width:100px;
display: table-cell;
vertical-align: middle;
}
div.column.current,
div.column:hover {
background-color: #a2884f;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a></div>
<div class="column"><a href="https://www.google.co.uk"> Design</a></div>
<div class="column"><a href="https://www.google.co.uk"> Build</a></div>
<div class="column"><a href="https://www.google.co.uk"> Deploy</a></div>
<div class="column"><a href="https://www.google.co.uk"> Test</a></div>
<div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a></div>
</div>fiddle :http://jsfiddle.net/3jp1d0fe/2/
关于javascript - JS改变div颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32045836/