1

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

堆栈流使用：

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

3 回答 3

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
}
于 2013-08-02T03:06:49.247 回答
1

或者您可以以编程方式将 class="active"（或 selected）添加到当前选定的菜单并执行以下操作：

.nav li a.active { color: #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 标签来做。尽管如此，在正文中添加该类以添加特定于页面的内容确实很有用。

于 2013-08-02T03:45:17.180 回答
0

我认为问题是，您是否希望动态完成此操作？或者你在为每一页编码？其他两个解决方案很棒，但是如果您实际上是单独访问每个页面，那就有点过分了。您可以根据页面向选定的导航元素添加一个类。如果您以前没有这样做过，这可能是最容易理解的方法，但@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 的答案和我的一样。

于 2013-08-02T07:02:55.490 回答