Question

我是AngularJS的新手。我的导航栏有这样的导航项：

<div class="header-inner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="nav-area">
                    <nav class="mainmenu">
                        <div class="collapse navbar-collapse">  
                            <ul class="nav navbar-nav">
                                <li><a href="#">Link 1</a></li>
                                <li><a href="#!/link2">Link 2</a></li>
                                <li><a href="#!/link3">Link 3</a></li>
                                <li><a href="#!/link4">Link 4</a></li>
                                <li><a href="#!/link5">Link 5</a></li>
                                <li><a href="#!/link6">Link 6</a></li>
                            </ul>
                        </div>
                    </nav>
               </div>
           </div>
       </div>
    </div>
</div>

和部分：

<section class="hero-area">
//some text
</section>

如何在点击链接1时显示部分，并在单击其余链接时隐藏。默认的活动链接是“Link1”，所以我需要在页面开始时显示部分。

感谢您的帮助。

Answer 1

您是否尝试过使用ng-click + ng-show（或ng-hide）？

<div class="header-inner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="nav-area">
                    <nav class="mainmenu">
                        <div class="collapse navbar-collapse">  
                            <ul class="nav navbar-nav">
                                <li><a href="#" data-ng-click="showSection = 1">Link 1</a></li>
                                <li><a href="#!/link2" data-ng-click="showSection = 2">Link 2</a></li>
                                <li><a href="#!/link3" data-ng-click="showSection = 3">Link 3</a></li>
                                <li><a href="#!/link4" data-ng-click="showSection = 4">Link 4</a></li>
                                <li><a href="#!/link5" data-ng-click="showSection = 5">Link 5</a></li>
                                <li><a href="#!/link6" data-ng-click="showSection = 6">Link 6</a></li>
                            </ul>
                        </div>
                    </nav>
               </div>
           </div>
       </div>
    </div>
</div>


<section class="hero-area" data-ng-init="showSection = 1" data-ng-show="showSection === 1">
//some text
</section>

Answer 2

您可能希望使用ui-router解决此问题的方法等等。它还允许您从书签中恢复活动页面（和其他参数）。

如果您更喜欢快速和肮脏，可以尝试使用范围变量：

<a ng-click="active_section='link 2'">Link 2</a> ... <section ng-show="active_section==='link 2'">

单击菜单项

2 个答案: