本文介绍了如何突出显示网站菜单上的活动标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的问题是:
我有一个菜单项,并且我想突出显示用户切换到的选项卡,肯定指向另一个页面。
stackover流使用:
My question is :I have a menu items, and I want to highlight the active tab that users switch to that points to another page for sure .
stackover flow use :
.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;
}
任何人都可以告诉我他们使用什么来使这项工作? >
Can anybody tell me what else they use to make this work ?
推荐答案
有一种方法可以使用我之前在我的网页上使用过的Javascript,
Well one way to do it with Javascript that I've used before on my pages,
将所有侧边栏按钮放在一个名为sideBarButton的CSS类中。 activeSideBarButton将是一个类,当链接与当前窗口的位置相同时设置。
Put all of your sidebar buttons in a CSS class called sideBarButton. activeSideBarButton will be a class that gets set when the link is the same as the current window's location.
$(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]);
}
}
});
这篇关于如何突出显示网站菜单上的活动标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!