Question

我有一个导航栏，其中包含四个项目以及与每个菜单项相关的一些图标。图标绝对一个接一个地放置，并且它们从不同的模板加载到视图中，但是在同一个控制器的范围内。

我想要实现的是根据点击的菜单项使用angular更改图标的z-index。我尝试了几种使用ng-switch的方法，但由于缺乏经验而无法弄清楚。

您能否分享一下如何解决问题的想法？

提前致谢。

HTML

标题视图：

<nav id="top-nav">
    <ul>
        <li ui-sref="root.home";>Home</li>
        <li ui-sref="root.drinks">Drinks</li>
        <li ui-sref="root.food-and-snacks">Food And Snacks</li>
        <li ui-sref="root.contacts">Contacts</li>
    </ul>
</nav>

图标视图：

<ul>
    <li>Home Icon</li>
    <li>Drinks Icon</li>
    <li>Food Icon</li>
    <li>Contacts Icon</li>
</ul>

CSS

ul li{
    position: absolute;
    height: 50px;
    width: 50px;
    lefT: 0;
    top: 0;
    z-index: 0;
}

Answer 1

所以这就是我点击后实现Z-Index变化的方式：

HTML

<ul class="icons">
    <li ng-class="{front:ctrl.activeTab(1)}">icon1</li>
    <li ng-class="{front:ctrl.activeTab(2)}">icon2</li>
    <li ng-class="{front:ctrl.activeTab(3)}">icon3</li>
    <li ng-class="{front:ctrl.activeTab(4)}">icon4</li>
</ul>

<ul class="nav">
    <li ng-click="ctrl.selectTab(1)">menu item1</li>
    <li ng-click="ctrl.selectTab(2)">menu item2</li>
    <li ng-click="ctrl.selectTab(3)">menu item3</li>
    <li ng-click="ctrl.selectTab(4)">menu item4</li>
</ul>

CSS

ul.icons li.front{
z-index:1;
}

CONTROLLER

self.selectTab = function (id) {
    self.tab = id;
}
self.activeTab = function (id) {
    return self.tab === id;
}

使用AngularJS单击更改Z-Index

1 个答案: