Question

我在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>

Answer 1

使用铁：路由器我创建了这个＆＃34;活跃＆＃34;模板助手将活动类添加到与当前页面/路由关联的菜单项：

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

Answer 3

要在当前页面上加粗导航链接，请先安装zimme：iron-router-active。这应该创建一个名为＆＃34; active＆＃34;单击某个项目时。

然后在您的html导航html中输入{{isActiveRoute＆＃39; home＆＃39;}}。这意味着当单击home时，它会将类从之前的任何内容更改为名为＆＃34; active＆＃34;

的类。

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

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

在流星中加入一个活跃的链接

3 个答案: