Question

我有三个锚点。每个人都需要在其下方显示一个独特的全宽div，类似于此网站上的ipad示例https://sendtoinc.com/

E.g。我点击第一个锚点，它打开第一个容器，第二个关闭第一个容器，然后打开第二个容器。

我可以使用ng-click切换活动状态来执行此功能吗？我是否需要在控制器内执行此操作？

以下是锚点的行。要显示的内容位于单独的容器中。任何想法或帮助将不胜感激。

<div class="row">
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor active">
                <div class="box box-drop ">
                    <h3>Data Explorer</h3>
                    <p>It’s a brave new data world.  Explore and navigate new realms of possibility such as post density, sentiment analysis, and even sort by hue and saturation.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor">
                <div class="box box-drop">
                    <h3>Analytics</h3>
                    <p>Exciting twists on old standards, Socialight's analytic platform allows you to analyze any social account in the world. Track your competitors and make informed, comparative decisions for your next campaign.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor">
                <div class="box box-drop">
                    <h3>Export & Embed</h3>
                    <p>Enliven billboards, websites, or TV screens with tailored feeds of tagged content from your Data Explorer  you can Improve your nextTransfer all of this useful information to outward facing products. </p>
                </div>
            </a>
        </div>
    </div>
</div>

附件是它的外观截图。顶行包含更改下面内容的锚点。

enter image description here

Answer 1

在您的标记中使用ng-switch或ng-if并在导航中使用ng-clicks

<div class="row">
    <div class="col-xs-12 col-md-4" ng-click="page=1">
        <a href="" class="box-anchor active">
            <div class="box box-drop ">
                <h3>Data Explorer</h3>
                <p>It’s a brave new data world.  Explore and navigate new realms of possibility such as post density, sentiment analysis, and even sort by hue and saturation.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-md-4" ng-click="page=2">
        <a href="" class="box-anchor">
            <div class="box box-drop">
                <h3>Analytics</h3>
                <p>Exciting twists on old standards, Socialight's analytic platform allows you to analyze any social account in the world. Track your competitors and make informed, comparative decisions for your next campaign.</p>
            </div>
        </a>
    </div>
    <div class="col-xs-12 col-md-4" ng-click="page=3">
        <a href="" class="box-anchor">
            <div class="box box-drop">
                <h3>Export & Embed</h3>
                <p>Enliven billboards, websites, or TV screens with tailored feeds of tagged content from your Data Explorer  you can Improve your nextTransfer all of this useful information to outward facing products. </p>
            </div>
        </a>
    </div>
</div>

在内容标记中使用ng-switch。注意：ng-switch-default是用户未选择页面时显示的页面。另请注意，如果用户选择一个，它将显示默认页面，因为在此示例中没有映射为“1”的ng-switch。

<div ng-switch="page">
    <div ng-switch-default>
        Content page one
    </div>
    <div ng-switch-when="2">
        Content page two
    </div>
    <div ng-switch-when="3">
        Content page three
    </div>
</div>

Answer 2

您可以使用ng-class切换“活跃”字样。 class，它将显示/隐藏/转换你的内容div。

<div class="row">
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor" ng-click="myActive = 1">
                <div class="box box-drop ">
                    <h3>Data Explorer</h3>
                    <p>It’s a brave new data world.  Explore and navigate new realms of possibility such as post density, sentiment analysis, and even sort by hue and saturation.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor" ng-click="myActive = 2">
                <div class="box box-drop">
                    <h3>Analytics</h3>
                    <p>Exciting twists on old standards, Socialight's analytic platform allows you to analyze any social account in the world. Track your competitors and make informed, comparative decisions for your next campaign.</p>
                </div>
            </a>
        </div>
        <div class="col-xs-12 col-md-4">
            <a href="" class="box-anchor" ng-click="myActive = 3">
                <div class="box box-drop">
                    <h3>Export & Embed</h3>
                    <p>Enliven billboards, websites, or TV screens with tailored feeds of tagged content from your Data Explorer  you can Improve your nextTransfer all of this useful information to outward facing products. </p>
                </div>
            </a>
        </div>
    </div>
</div>


<div ng-class="{active: myActive == 1}">Content Area 1</div>
<div ng-class="{active: myActive == 2}">Content Area 2</div>
<div ng-class="{active: myActive == 3}">Content Area 3</div>

通过上述操作，单击带有ng-click指令的div将把范围的myActive变量更改为相应的值。然后，这将激活＆＃39;类到下面的部分。然后，您可以根据“有效”状态显示/隐藏内容。类，并添加一些CSS过渡，使其看起来时髦。

Answer 3

看看角度自举手风琴的实现。

它可以做类似的事情，当你展开它时它关闭所有其他手风琴组。

手风琴代码可在github https://github.com/angular-ui/bootstrap/tree/master/src/accordion

上找到

特别是你可能对closeOthers函数感兴趣。请注意，您必须以某种方式对div进行逻辑分组才能使其正常工作。

// Ensure that all the groups in this accordion are closed, unless close-others explicitly says not to 
this.closeOthers = function(openGroup) { 
    var closeOthers = angular.isDefined($attrs.closeOthers) ? $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers; 
    if ( closeOthers ) { 
        angular.forEach(this.groups, function (group) { 
        if ( group !== openGroup ) { 
            group.isOpen = false; 
        } 
   }); 
 } 
};

使用ng-click切换3个不同的div

3 个答案: