如何使活动菜单项具有突出显示样式
How to make active menu item with highlight style?
我希望用彩色正方形突出显示活动菜单项。
.main-menu ul {
padding: 0px;
margin: 0px;
text-align: center;
}
.main-menu li {
list-style: none;
display: inline-block;
padding: 40px 0;
}
.main-menu a {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 14px;
margin-right: 5px;
padding: 5px 5px;
margin: 0;
border-radius: 3px;
/*color: #fff;*/
line-height: 24px;
display: inline-block;
}
.main-menu a:hover {
background-color: #F78E21;
color: #fff;
}
<div class="main-menu">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="products.html">Projects</a></li>
<li><a href="contact-us.html">Gallery</a></li>
<li><a href="contact-us.html">TV Appearances</a></li>
<li><a href="contact-us.html">Events</a></li>
<li><a href="contact-us.html">Links</a></li>
<li><a href="contact-us.html">Testimonials</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
</div>
.main-menu a:hover,
.main-menu a.active{
background-color: #F78E21;
color: #fff;
}
如果实际上没有class="active"
,并询问如何为每个页面动态添加它,那将是一个大问题。好吧,如果它都是静态代码,那么只需在每一页上手动添加它。如果它在CMS中,那么就为该平台寻找解决方案。如果您正在寻找Javascript解决方案,请查看菜单上的jQuery add-class.active
试试这个代码示例。希望得到帮助。
HTML代码段
<div class="main-menu">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Gallery</a></li>
</ul>
JS代码
$(function(){
$('ul').on('click','a', function(){
$('a').removeClass();
$(this).addClass('active');
});
});
CSS style(将其添加到您的CSS部分,您可以更改任何您想要的样式)
.active{
border:1px solid red;
color : red;
}
相关文章:
- 应用程序在呈现Jquery Mobile之前显示无样式的Html
- 避免在用ng href加载样式表之前显示内容
- 如何使活动菜单项具有突出显示样式
- dd显示样式更改为none
- 设置正文显示样式 无 与一个子显示样式块
- 删除 javascript 中 html 按钮的默认显示样式属性
- 向幻灯片放映添加滚动显示样式
- 为什么不'DOM样式节点显示样式表应用的样式
- 在外部设置显示样式会导致onclick()事件初始化两次点击
- 有没有“电影演职员表”滚动显示?样式插件的单词列表
- 检查DIV元素的显示样式
- 使用JavaScript动态更改img标签中的显示样式
- Jquery和Javascript没有返回显示样式的实际值
- 使用Javascript在不影响打印样式的情况下更改显示样式(CSS)
- 表格行的显示样式与标题保持对齐
- 在哪里可以找到 HTML 标记的默认“显示”样式属性
- “显示”样式属性不正确
- 不显示样式
- -WEBKIT-TRANSITION显示样式
- 在表行上使用.remove会产生显示样式:none