在流星中加粗一个活跃的 link

Question

我在 Meteor 的导航栏中有这段代码，我试图在 link 处于活动状态时将其加粗。我试过使用 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>

Answer 1

只需添加这个。

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
}

Answer 2

使用 iron:router 我创建了这个 "active" 模板帮助程序以将活动 class 添加到与当前 page/route 关联的菜单项：

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>

Answer 3

要在当前页面上加粗导航 link，请先安装 zimme:iron-router-active。单击某个项目时，这应该会创建一个名为 "active" 的 class。

然后在您的 html 导航 html 中输入 {{ isActiveRoute 'home'}}。这意味着当单击主页时，它会将 class 从之前的任何内容更改为名为 "active"

的 class

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

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

在流星中加粗一个活跃的 link

Bold an active link in meteor

css

meteor

hyperlink

iron-router