如何使用CSS突出显示HTML按钮？
闪闪发光
我正在尝试在导航菜单（带有下拉菜单）中突出显示“当前页面”。
当我具有简单的导航链接（使用“ <a>” HTML标记构建）时，下面的代码完成了工作。我现在正在升级导航栏以容纳下拉菜单（使用“ <按钮>” HTML标记）。
我相信我需要采取类似的方法，并为“当前”页面分配一个活动类，但是我无法像我对“ <a>”对象那样，想出如何遍历“ <button>”对象的方法
使用导航栏中的按钮（“ <button>”）时，如何动态突出显示导航栏中的当前页面？
我在W3上找到了一篇相关文章：https : //www.w3schools.com/howto/tryit.asp? filename =tryhow_js_active_element2，但由于我在不同的URL之间导航，因此不适用于我的用例。
我的代码的简化版本如下所示：
<div class="navigation">
<a href="index.html">Home</a>
<a href="page_a.html">Page A</a>
<div class="dropdown">
<button class="dropbtn" onclick="location.href='page_b.html'" type="button"> Page B</button>
<div class="dropdown-content">
<a href="page_b.html#food">Food</a>
<a href="page_b.html#exercise">Exercise</a>
<a href="page_b.html#drinks">Drinks</a>
</div>
</div>
<a href="page_c.html">Page C</a>
<a href="page_d.html">Page D</a>
</div>
<!-- Highlight current page (works for <a> but not <button>)-->
<script>
$(function(){
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active');
$(this).parents('li').addClass('active');
}
});
});
</script>
关联的CSS：
...
.active {
background-color: blue;
}
...
.dropdown:not(.dropdown-content) {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
padding: 14px 16px;
margin: 0;
}
...
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #ffffff;
background-color: #000000;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content{
display: block;
z-index: 1;
}
克莱夫·阿特金斯（Clive Atkins）
您需要将活动类添加到每个页面上，以便用户在主页上时。您的代码将是这样。
<a class='active' href="index.html">Home</a>
对于A页
<a class='active' href="page_a.html">Page A</a>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用SwiftUI移除按钮上的突出显示？
- 2
如何使用触发器在XAML中突出显示按钮？
- 3
使用JavaScript，HTML和CSS突出显示单词
- 4
使用CSS或jquery选择后如何突出显示图像？
- 5
如何保持所选按钮突出显示？
- 6
如何使按钮内容突出显示动画？
- 7
如何从按钮中删除突出显示样式
- 8
按住CSS中的输入按钮时如何删除蓝色突出显示？
- 9
如何从“ TR”的css样式的突出显示的选定行中排除按钮功能？
- 10
将鼠标悬停在 CSS Grid 项目上时如何突出显示整个按钮？
- 11
HTML + JavaScript：如何在单击Javascript中的按钮时突出显示一行？
- 12
突出显示用户输入的文本-HTML，CSS
- 13
单击按钮后如何自动取消突出显示按钮
- 14
按下按钮时如何突出显示按钮
- 15
按钮全部突出显示
- 16
如何突出显示CSS网格单元？
- 17
如何使光标移动按钮并依次突出显示它们。使用像 .each 和 mouseenter 这样的 Jquery 方法
- 18
使用 css 突出显示 JavaFX TableRow 的顶部
- 19
CSS 不可见单选按钮但突出显示包装 div
- 20
带有Jquery的HTML按钮突出显示不起作用
- 21
HTML / CSS如何暂时突出显示页面的一部分
- 22
在悬停时如何突出显示元素内的文本，而不是整个元素及其填充？CSS / HTML
- 23
HTML / CSS如何暂时突出显示页面的一部分
- 24
如何为 html 或 css 中的文本创建自定义下划线或突出显示？
- 25
CSS-HTML文本突出显示了不应显示的位置
- 26
使用CSS和Bootstrap 3以突出显示html表中当前悬停的行和列
- 27
使用CSS和Bootstrap 3来突出显示html表中当前悬停的行和列
- 28
如何在SpriteKit中添加突出显示的按钮？
- 29
如何突出显示GTK工具栏中的按钮
我来说两句