加粗流星中的活动链接答案

【问题标题】：Bold an active link in meteor加粗流星中的活动链接
【发布时间】：2015-04-17 07:41:14
【问题描述】：

我在 Meteor 的导航栏中有这段代码，我试图在链接处于活动状态时将其加粗。我试过使用 CSS 和 a:active {} 但这似乎不起作用。

<div class="navSecondary">
    <div class="menu" align="center">
        <ul class="menu-items">

            <li class="active">
            <a href="{{pathFor 'home'}}"> HOME </a></li>
       </ul>
    </div>
</div>

【问题讨论】：

Meteor 中的 CSS 像往常一样工作。但是你所说的“活跃”是什么意思？活动如“一个活动的链接”或活动如“<li> 元素与类active”？

标签： css meteor hyperlink iron-router

【解决方案1】：

使用 iron:router，我创建了这个“活动”模板助手，以将活动类添加到与当前页面/路由关联的菜单项：

Template.registerHelper("active", function(routeName) {
  var curRoute = Router.current().route;
  return curRoute.getName() === routeName ? 'active' : '';
};

在模板中：

<ul class="nav navbar-nav">
  <li class="{{active 'page1'}}">
    <a href="{{pathFor 'page1'}}">Page1</a></li>

  <li class="{{active 'page2'}}">
    <a href="{{pathFor 'page2'}}">Page2</a></li>
</ul>

【讨论】：

只要您停留在页面上，此链接是否会加粗？（即如果您切换到第 2 页，第 1 页变为非粗体，第 2 页变为粗体）
是的，它使菜单项根据当前页面激活（铁路由名称）
+1 这是最好的方法。如果您使用单击事件执行此操作，则如果用户直接导航到页面（例如，通过输入链接地址），链接将不会处于活动状态。通过使用路由器，您将确保它始终有效。
CSS 看起来如何使其变为粗体？到目前为止，这就是我所拥有的，但它似乎不起作用。 .menu a:hover { 字体粗细：粗体； } .menu a:active { 字体粗细：粗体；这似乎只在我将鼠标悬停在它上面时才会突出显示，但在活动时不会突出显示。
全局帮助代码中缺少括号

【解决方案2】：

只需添加这个。

Template.home.events({
'mouseenter a':function(){ //"a" can be replaced for an id or classname
    var link = document.getElementsByTagName("a");
    link.style.color = "BLACK";
    //or whatever you want to do
    console.log("passed")
  }
})

就像@Peppe L-G 说 Meteor 的工作方式与其他使用 CSS 的框架完全一样。

只需将其放在 .css 文件中即可。

a:hover { 
    background-color: black; //for example
    font-weight:bold; //this will change to bold the text
}

【讨论】：

您的代码在单击 HOME 链接时未加粗。有什么我想念的吗？有什么方法可以在 CSS 中做到这一点？
只要我停留在主页上，如何让它保持粗体？
如果你想让它们在路由器打开时保持粗体，为什么不总是把它们加粗呢？用简单的 .css
这只是一个悬停 - OP 希望链接根据用户所在的页面处于活动状态或粗体。
拉姆齐是对的。我不希望它一直很大胆。就在链接处于活动状态时，我希望它是粗体的。

【解决方案3】：

要在当前页面上加粗导航链接，首先安装 zimme:iron-router-active。单击项目时，这应该创建一个名为“活动”的类。

然后在您的 html 导航 html 中输入 {{ isActiveRoute 'home'}}。这意味着当点击 home 时，它会将类从以前的任何内容更改为名为“活动”的类

<li class="{{ isActiveRoute 'home'}}">
            <a class="home" href="{{pathFor 'home'}}"> HOME </a></li>

最后在你的 CSS 类型中：

   .active a {
        color: black;
    }

    .menu .active a {
        color: black;
        font-weight: bold;
    }

这应该会产生一个加粗当前导航栏的结果。

【讨论】：