Question

我的问题是：我有一个菜单项，我想突出显示用户切换到的活动标签，确保指向另一个页面
stackover flow使用：

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

Answer 1

在每个页面的<body>标记中添加一个唯一的类。例如，在主页上：

<body class="home">

在联系页面上：<body class="contact">

在博客页面上：<body class="blog">

..等等。

然后，在你的CSS中，做这样的事情：

.home .nav li.home, .contact .nav li.contact, .blog .nav li.blog {
  // styling to indicate active state
}

Answer 2

或者您可以通过编程方式将class =“active”（或已选中）添加到当前所选菜单中并执行以下操作：

.nav li a.active { color: #FFFFFF; }

@ChrisHerbert你的解决方案不起作用......你将改变菜单的所有内容......因为课程在你的身体标签中。（编辑：解决方案已更改，请参阅评论）

有了@ChrisHerbert的回答，你可以用两种方式做到：
1）使用Javascript，获取body标签中的类，然后选择具有关联索引的一个（在jQuery中为：eq（））。（对于非JavaScript用户，你可以找到一种没有javascript的方式）
OR
2）如果你知道菜单中每个页面的索引，你可以这样做：.home .nav li：nth-child（0）{}，。about-us .nav：nth-child（1）{}等。！或者其他子选择器，但IE的旧版本不喜欢它！

我认为你应该用我的解决方案而不是身体标签来做。尽管如此，在正文中添加该类以便添加页面非常有用。

Answer 3

我认为问题是，您是否希望动态完成此操作？或者你在编写每一页？另外两个解决方案很棒，但实际上你是单独访问每个页面有点过分。您可以根据页面向所选的nav元素添加一个类。如果您之前没有这样做，这可能是最容易理解的，但@ ChrisHerbert的解决方案是使用CSS动态执行它的最好方法（没有PHP ifs等）。

<强> HTML

<div class="nav">
<a href="home">Home</a>
<a href="about-us">About us</a>
<a href="portfolio" class="selected">Portfolio</a>
</div>

<强> CSS

.nav a {
color:#ff4444;
}
.nav a.selected {
color:#ff44ff;
}

编辑：刚才意识到@ AnnieCaron的回答和我的一样。

突出显示导航菜单中的活动选项卡

3 个答案: