Bootstrap/AngularJs:如何为导航类的活动选择设置粗体属性

Bootstrap/AngularJs : How to set bold attribute for the active selection of nav class?

本文关键字：选择 活动 设置 属性 导航 AngularJs Bootstrap      更新时间：2024-01-16

我想在导航栏项目的活动选择上设置bold属性。我该如何做到这一点？

 <ul class="nav">
       <li role="presentation" ng-repeate="item in items" 
          ng-class="{'active':navLink == item.header}">
       </li>
    </ul>

您需要研究如何使用CSS选择器瞄准特定元素。这既不是HTML、Javascrupt，也不是Angular相关的——这纯粹是CSS和样式规则的特殊性。

使用CSS并设置活动选择的样式规则：（假设活动选择被称为activeLink…并且你的nav ul的id为navList。注意，我在li类中也有navLink，它也可以用来瞄准正确的元素。

#navList.activeLink｛font-weight:bold｝

使用W3中的nav ul进行演示-当您在li上设置activeLink时，它将使其显示为粗体。

 <ul id="navList">
  <li class="activeLink"><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

然后，您需要页面中的逻辑来更改每个页面的活动链接。我使用php并在将nav调用到页面之前设置活动页面，然后在li中有一个if语句，如果它是活动页面，则在中回显该类。

    <?php $activePage="home";?>
    // other code
 <ul id="navList">
  <li class="navLink <?php if($activePage=="home"){echo"activeLink";}?>"><a href="default.asp">Home</a></li>
  <li class="navLink <?php if($activePage=="news"){echo"activeLink";}?>" ><a href="news.asp">News</a></li>
  <li class="navLink <?php if($activePage=="contact"){echo"activeLink";}?>"><a href="contact.asp">Contact</a></li>
  <li class="navLink <?php if($activePage=="about"){echo"activeLink";}?>"><a href="about.asp">About</a></li>
</ul>
相关文章：