javascript - 在导航菜单中突出显示事件选项卡

标签 javascript html css

<分区>

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

stackover 流程​​使用:

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

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

菜单:

<ul  class="nav">

                      <li> <a  href="{$smarty.const._URL}/index.{$smarty.const._FEXT}" class="wide-nav-link menu_link" >{$lang.homepage}</a></li> 
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle wide-nav-link menu_link " data-toggle="dropdown">{$lang.category} <b class="caret"></b></a>
                        <ul class="dropdown-menu menu_link">
                        {dropdown_menu_video_categories}
                        </ul>
                      </li>

                      {if $smarty.const._MOD_ARTICLE == 1}
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle wide-nav-link menu_link " data-toggle="dropdown">{$lang.articles} <b class="caret"></b></a>
                        <ul class="dropdown-menu menu_link">
                        {dropdown_menu_article_categories}
                        </ul>
                      </li>
                      {/if}
                      <li> <a href="{$smarty.const._URL}/topvideos.{$smarty.const._FEXT}" class="wide-nav-link menu_link ">{$lang.top_videos}</a></li>
                      <li><a href="{$smarty.const._URL}/newvideos.{$smarty.const._FEXT}" class="wide-nav-link menu_link">{$lang.new_videos}</a></li>
                      <li><a href="{$smarty.const._URL}/randomizer.php" rel="nofollow" class="wide-nav-link menu_link">{$lang.random_video}</a></li>
                      {if isset($mm_menu_always_inject1)}{$mm_menu_always_inject1}{/if}     
                      <li><a href="{$smarty.const._URL}/contact_us.{$smarty.const._FEXT}" class="wide-nav-link menu_link">{$lang.contact_us}</a></li>

                                            {if isset($mm_menu_always_inject2)}{$mm_menu_always_inject2}{/if}       
                      {if $logged_in != 1 && isset($mm_menu_notlogged_inject)}{$mm_menu_notlogged_inject}{/if}
                    </ul>

最佳答案

或者您可以通过编程方式将 class="active"(或 selected)添加到当前选定的菜单并执行此操作:

.nav li a.active { 颜色:#FFFFFF; }

@ChrisHerbert 您的解决方案将不起作用...您将更改菜单的所有 li...因为类在您的 body 标记中。 (编辑:解决方案已更改,请参阅评论)

对于@ChrisHerbert 的回答,您可以通过两种方式进行:
1) 使用 Javascript,获取 body 标签中的类,然后选择具有关联索引的类(jQuery 中的:eq())。 (你可以为非 javascript 用户找到一个没有 javascript 的方法)
或者
2) 你可以做:.home .nav li:nth-child(0) {}, .about-us .nav:nth-child(1) {} 等如果你知道菜单中每个页面的索引!或其他子选择器,但是,旧版本的 IE 不喜欢它!

我认为您应该使用我的解决方案而不是 body 标签。尽管如此,在正文中包含该类对于要添加的页面特定内容仍然非常有用。

关于javascript - 在导航菜单中突出显示事件选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18008058/

相关文章:

javascript - AJAX div 在没有警告调用的情况下不会更新,错误为 : b. 数据未定义

javascript - Google Maps Web API 沿着多个标记在道路上绘制路径

javascript - 我可以将 Marionette Collection View 附加到现有 HTML 吗?

html - 合并两个 HTML 表格单元格

javascript - Google SEO 和隐藏元素

javascript - 使用 JavaScript 阻止按键

php - 通过return url获取买家姓名和收货地址

html - 具有 CSS opacity 属性的 <video> 仅在 Chrome 54 for Mac 上显得异常暗淡

javascript - 如何在 div 上创建自定义滚动条(Facebook 样式)

javascript - 使用 JavaScript 计算逼真的盒子阴影