angular 菜单切换

菜单切换 安哥拉 和 jquery 操作dom不同，操作数据来影响视图变化，现特此记录下。 下面有 ng-class用法 函数用法 ng-click

html 部分

<ul class="header">
    <li ng-class="{active:choose1,quite:!choose1}" ng-click="click1()">产品概要</li>
    <li ng-class="{active:choose2,quite:!choose2}" ng-click="click2()">产品特点</li>
    <li ng-class="{active:choose3,quite:!choose3}" ng-click="click3()">最新净值</a></li>
    <li ng-class="{active:choose4,quite:!choose4}" ng-click="click4()">如何购买</li>
</ul>
<img ng-show="choose1 || choose2 || choose3" src="img/tttt/ban.jpg" alt="" class="banner">
<!-- 情况一-->
<div class="gaiyao" ng-if="choose1">
    <div class="intro3">
        <h1>XXXXXXX</h1>
        <p>XXXXXXXXXXXXXXXXXX</p>
    <div>   
</div>
<!-- 情况二-->
<div class="tedian" ng-if="choose2">
    <div class="intro3">
        <h1>XXXXXXX</h1>
        <p>XXXXXXXXXXXXXXXXXX</p>
    <div>   
</div>
<!-- 情况三-->
<div class="jingzhi" ng-if="choose3">
    <div class="intro3">
        <h1>XXXXXXX</h1>
        <p>XXXXXXXXXXXXXXXXXX</p>
    <div>   
</div>
<!-- 情况四-->
<div class="goumai" ng-if="choose3">
    <div class="intro3">
        <h1>XXXXXXX</h1>
        <p>XXXXXXXXXXXXXXXXXX</p>
    <div>   
</div>

js部分

angular.module('ued').directive('pageXjzl', function(WebApi) {
    return {
        templateUrl: 'page/xjzl/xjzl.html',
        link: function(scope) {
            WebApi.langTitle("现金赠利");
            scope.choose1 = true;
            scope.choose2 = false;
            scope.choose3 = false;
            scope.choose4 = false;

            scope.click1 = function() {
                scope.choose1 = true;
                scope.choose2 = false;
                scope.choose3 = false;
                scope.choose4 = false;
            }
            scope.click2 = function() {
                scope.choose1 = false;
                scope.choose2 = true;
                scope.choose3 = false;
                scope.choose4 = false;
            }
            scope.click3 = function() {
                scope.choose1 = false;
                scope.choose2 = false;
                scope.choose3 = true;
                scope.choose4 = false;
                // 初始化图表
                //scope._initChart();
            }
            scope.click4 = function() {
                scope.choose1 = false;
                scope.choose2 = false;
                scope.choose3 = false;
                scope.choose4 = true;
            }
            scope.click1();
        },
    };
});

css样式

    body{
        background: #f0f0f0;
    }
    page-xjzl{
        font-size: 14px;
    
        // height:auto !important;
        .banner {
            display: block;
            width: 100%;
            border-bottom: 1px solid #323232;
        }
        .quite{
    
        }
        .active{
            color: #fff;
            background: #800033;
        }
    p.tipsWarm,
    p.tipsWarm,
    p.tipsWarm{
        margin: 16px 10px;
        border-top: 1px solid #323232;
        color: #800033;
        line-height: 1.3;
        padding-top: 14px;
        font-size: 10px;
    }
    p.tips {
        margin: 16px 10px;
        /*border-top: 1px solid #323232;*/
        color: #bab9b9;
        line-height: 1.3;
        padding-top: 4px;
        font-size: 10px;
    }
        .gaiyao,.tedian{
            background: #f0f0f0;
            .intro3 h1,
            .intro3 p {
                font-size: 14px;
                 color: #323232;
            }
            .intro3 h1 {
                line-height: 40px;
                padding: 0 16px;
            }
            
            .intro3 p {
                background: #fff;
                padding: 6px 16px;
                line-height: 1.3;
            }
            img.chart {
                width: 90%;
                display: block;
                margin: 20px auto 16px;
            }
        }
        .goumai{
            background: #f0f0f0;
            height: 100%;
            .intro {
                width: 90%;
                overflow: hidden;
                margin: 0 auto;
                padding-top: 20px;
            }
            
            .intro-pic {
                float: left;
                width: 26%;
            }
            
            .intro ul {
                float: left;
                width: 74%;
            }
            
            .intro li {
                padding-left: 12px;
            }
            
            
            .intro li:nth-child(1) {
                padding-top: 30px;
            }
            
            .intro li:nth-child(2) {
                padding-top: 98px;
            }
            
            .intro li:nth-child(3) {
                padding-top: 66px;
            }
            
            .intro li:nth-child(4) {
                padding-top: 6px;
                line-height: 16px;
            }
        }
        .tedian{
            background: #f0f0f0;
        }
        .gaiyao{
            background: #f0f0f0;
        }
        .header {
            height: 40px;
            overflow: hidden;
            background: white;
        }
        .header li {
            float: left;
            width: 25%;
            height: 40px;
            text-align: center;
            font-weight: bold;
            line-height: 38px;
            border-bottom: 2px solid #800033;
        }
        .header li a {
            display: block;
            width: 100%;
            height: 100%;
            color: #000;
        }
        @media (min-width: 320px) {
            .goumai .intro li:nth-child(1) {
                padding-top: 30px;
            }
        
            .goumai .intro li:nth-child(2) {
                padding-top: 98px;
            }
        
            .goumai .intro li:nth-child(3) {
                padding-top: 66px;
            }
    
            .gaiyao .intro li h4 {
                width: 28%;
            }
        }
        
        @media (min-width: 360px) {
            .goumai .intro li:nth-child(1) {
                padding-top: 34px;
            }
        
            .goumai .intro li:nth-child(2) {
                padding-top: 114px;
            }
        
            .goumai .intro li:nth-child(3) {
                padding-top: 96px;
            }
        
            .gaiyao .intro li h4 {
                width: 26%;
            }
        }
        
        @media (min-width: 375px) {
            .goumai .intro li:nth-child(1) {
                padding-top: 34px;
            }
        
            .goumai .intro li:nth-child(2) {
                padding-top: 128px;
            }
        
            .goumai .intro li:nth-child(3) {
                padding-top: 82px;
            }
        
            .gaiyao .intro li h4 {
                width: 26%;
            }
        }
        
        @media (min-width: 414px) {
            .goumai .intro li:nth-child(1) {
                padding-top: 38px;
            }
        
            .goumai .intro li:nth-child(2) {
                padding-top: 140px;
            }
        
            .goumai .intro li:nth-child(3) {
                padding-top: 108px;
            }
        
            .gaiyao .intro li h4 {
                width: 24%;
            }
        }
    }

主要的思想 是 先通过scope，定义4个布尔值。在ng-class绑定上，一个点击选中后，一个没有两个状态。并 把ng-show.内容区域关联上。达到切换效果。