如何突出显示网站菜单上的活动标签？ [英] How to highlight active tab on the website menu?

问题描述

我的问题是：
我有一个菜单项，并且我想突出显示用户切换到的选项卡，肯定指向另一个页面。



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]);
      }   
    } 
});

这篇关于如何突出显示网站菜单上的活动标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！