Javascript 使用Css设置导航栏样式

我的视图顶部有几个导航栏。我正在使用MVC4Razor视图来设计我的布局。现在我设法获得了带有悬停效果的导航栏，但我需要做更多的事情

这就是我现在的看法。

默认情况下，我希望主工具栏显示为橙色。当用户导航到其他条形图时，主条形图将恢复正常，选定的条形图将具有激活的样式

这是我的css样式

ul.topnav
{
    display:table;
    list-style: none;
    padding: 0px 0px 0px 10px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    text-align: left; 
    font-size: 1.2em; 
}
ul.topnav li
{
    width: auto;
    display:table-cell;
    margin: 0px 6px;
    padding: 0 15px 0 0;
}
ul.topnav li a
{
    margin: 0px 6px;
    border-top: 5px solid #CCC;
    padding: 0 15px 0 0;
    color: black;
    display: block;
    text-decoration: none;
}
ul.topnav li a:hover
{
    color: #eb8c00;
    border-top: 5px solid #eb8c00;
    margin: 0px 6px;
    padding: 0 15px 0 0;
    display: block;
}

在my_Layout.cshtml中，这里是我的代码

  <div id="app-top-navigation">
        <ul class="topnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
   </div>

只需将.active应用于需要激活的导航项即可

HTML

---

我可以将主页设置为活动页面，但如果导航到另一个页面，我需要将活动样式设置放在远离主页的地方。使用HTML帮助器似乎是一种流行的选择：

<li><a href="#" class="active">Home</a></li>

ul.topnav li a.active { 
border-top: 5px solid orange; 
}