欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

AngularJS - 用Angular JS写个NavBar

程序员文章站 2022-05-25 18:34:03
...
HTML;

    <ul class="stats-sidebar-nav">
        <li class="item" ng-class="{'selected-1':statsView=='overview', 'item-hover': hover}" ng-mouseenter="hover1 = true" ng-mouseleave="hover1 = false"><a href="#/overview">课程总览</a></li>
        <li class="item" ng-class="{'selected':statsView=='satisfaction', 'item-hover': hover2}" ng-mouseenter="hover2 = true" ng-mouseleave="hover2 = false"><a href="#/satisfaction">课程满意度</a></li>
        <li class="item" ng-class="{'selected':statsView=='proactivity', 'item-hover': hover3}" ng-mouseenter="hover3 = true" ng-mouseleave="hover3 = false"><a href="#/proactivity">课程活跃度</a></li>
        <li class="item" ng-class="{'selected':statsView=='understanding', 'item-hover': hover4}" ng-mouseenter="hover4 = true" ng-mouseleave="hover4 = false"><a class="" href="#/understanding">授课消化度</a></li>
    </ul>

less:
@light-blue-bg: #1387C0;

a:hover{
    text-decoration: none;
}

.hide {
    display: hidden;
}
.border-fix {
    border-top: 1px solid @light-blue-bg; // pixel perfect
}

.stats-sidebar-nav {
    float: left;
    width: 200px;
    height: 700px; // actuall 500px
    background-color: #324056;
    .item {
        &.selected{
            background-color: @light-blue-bg;
            font-weight: bold;
        }

        &.selected-1{
            background-color: @light-blue-bg;
            font-weight: bold;
            .border-fix;
        }
        cursor: pointer;
        width: 200px;
        height: 40px;
        border-top: 1px solid #3D4A5D;
        padding-left: 18px;
        a {
            line-height: 40px;
            height: 100%;
            width: 100%;
            display: block;
            text-decoration: none;
            color: white;
        }
    }
    .item-hover {
        background-color: @light-blue-bg;
        // .border-fix;
    }
}

javascript: 无

解释:
在html中,ng-mouseenter 与 ng-mouseleave 给每个块定义了一个hover[i]变量,这个变量控制了ng-class中得item-hover。

css中,.stats-sidebar-nav .item a 定义了a的:
1. line-height 使得文字居中
2. height width 均为100%, display为block  使得a的大小与div相重合。(所以实现hover的另外一个思路就是用a:hover)