菜单切换 安哥拉 和 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.内容区域关联上。达到切换效果。
网友评论