如何突出显示网站菜单上的活动选项卡
How to highlight active tab on the website menu?
我的问题是:我有一个菜单项,我想突出显示用户切换到的活动选项卡,它肯定指向另一个页面
堆叠流用途:
.nav {
float: left;
font-size: 125%;
}
.nav ul {
margin: 0;
}
.nav li {
background: none repeat scroll 0 0 #777777;
display: block;
float: left;
margin-right: 7px;
}
**.nav .youarehere {
background: none repeat scroll 0 0 #FF9900;
}**
.youarehere a {
color: #FFFFFF;
}
.nav li:hover {
background-color: #FF9900;
}
.nav a {
color: #FFFFFF;
display: block;
padding: 6px 12px;
text-decoration: none;
}
有人能告诉我他们还用什么做这件事吗?
使用我以前在页面上使用过的Javascript的一种方法是
将所有侧边栏按钮放在一个名为sideBarButton的CSS类中。activeSideBarButton将是当链接与当前窗口的位置相同时设置的类。
$(document).ready(function () {
var sideBarButtons = $(".sideBarButton");
for(var i in sideBarButtons)
{
if(!sideBarButtons[i].pathname)
{
continue;
}
if(sideBarButtons[i].pathname == window.location.pathname)
{
sideBarButtons[i].className += ' activeSideBarButton';
console.log("Enabled button " + sideBarButtons[i]);
}
}
});
相关文章:
- 活动选项卡's源代码-获取变量s值
- 从Bootstrap获取活动选项卡ID并将其传递给PHP
- 使用 AngularJS 设置活动选项卡样式
- 引导导航选项卡未突出显示活动选项卡
- 基于查询字符串的活动选项卡
- Chrome扩展-仅更改活动选项卡的default_icon
- jQuery UI选项卡基于活动选项卡显示/隐藏图像
- 非活动选项卡容器内的选定宽度问题
- 如何在chrome扩展中检索活动选项卡、后台消息侦听器内部
- 如何仅在活动选项卡中获取选定选项的属性
- 使用jquery更改活动选项卡
- 更改活动选项卡的颜色
- 是否可以使用chrome扩展名与非活动选项卡中的内容元素进行交互
- 我可以从代码后面更改按钮单击上的Jquery ui活动选项卡吗
- 在范围中显示活动选项卡的名称
- JQuery UI(手风琴),在初始化时打开活动选项卡
- Javascript函数在活动选项卡上启用链接
- 如何使用jQuery获取选定/活动选项卡的href
- 角度基础选项卡显示错误的内容和带有 ng-if 的活动选项卡
- 活动选项卡单击问题