【问题标题】:How to highlight active tab on the website menu?如何突出显示网站菜单上的活动标签?
【发布时间】:2013-07-29 22:36:26
【问题描述】:

我的问题是: 我有一个菜单项,我想突出显示用户切换到的活动选项卡,该选项卡肯定指向另一个页面。

堆栈流使用:

.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;
}

谁能告诉我他们还用什么来完成这项工作?

【问题讨论】:

  • 当您说用户在另一个标签页上时,您的意思是该用户已移动到一个新的页面,并且您希望标签页显示这一点吗?
  • exactly.highlighting tabs 表示移动到突出显示的标签页。

标签: javascript html css templates smarty


【解决方案1】:

使用我之前在我的页面上使用过的 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]);
      }   
    } 
});

【讨论】:

  • 令人困惑,因为类侧边栏按钮不能代表下拉项目旁边的菜单项的所有样式..有什么建议吗?
  • DOM 节点可以分配多个类。它们可以同时是 sideBarButton 类和下拉菜单类的成员。
  • 这个解决方案不起作用;使用 php /smarty/css/javascript.sideBarButtons var 无法理解变量是没有意义的。无论如何我实现了这个 js 定义的 css 但没有任何工作//或为所有
  • 元素定义 CSS 时,所有选项卡都会突出显示。有什么想法吗?
猜你喜欢
相关资源
最近更新 更多
热门标签