Javascript 基于单击更改面板标题颜色并显示面板正文内容

我有一个面板，分为3个部分

当我点击其他部分时，它的背景颜色应该随着文本颜色而改变，并且根据它，面板主体内容应该改变

app.controller（'three_panel_controller'，函数（）{
$scope.switch_panel=false；
})

。单击\u部分\u背景\u颜色{
背景：#2标签9；
颜色：#ffffff；
}
.Unclocked_截面_背景_颜色{
背景:#f5；
颜色：#000000；
}
.填充顶部底部15{
填充顶部：15px；
垫底：15px；
}

组成
主题
发送
单击“撰写”按钮时显示div
单击主题显示div
单击发送时显示div

通过为每个面板分配一个Id，您可以跟踪在范围变量

开关面板

中选择了哪一个：

   <div class="panel-heading cursor_pointer no_box_shadow border_bottom_none text-center no_border_radius">
                            <div class="row ">
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center clicked_section_background_color padding_top_bottom_15" ng-click="switch_panel = '1'"
                                     ng-class="{clicked_section_background_color : switch_panel == '1', unclicked_section_background_color : switch_panel !='1'}">
                                    <span class="font_size_14">Compose</span>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15 unclicked_section_background_color" ng-click="switch_panel = '2'"
                                     ng-class="{clicked_section_background_color : switch_panel == '2' , unclicked_section_background_color : switch_panel !='2'}">
                                    <span class="font_size_14">Subject</span>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15">
                                    <span class="font_size_14">Send</span>
                                </div>
                            </div>
                        </div>

组成
主题
发送

那么你的第二部分：

<div class="panelbody" ng-if="switch_panel=='1'">
    <span>Active panel 1</span>
  </div>

  <div class="panelbody"  ng-if="switch_panel=='2'">
    <span>Show div on subject click</span>
  </div>

  <div class="panelbody"  ng-if="switch_panel=='3'">
    <span>Show div on send click</span>
  </div>

有源面板1
单击主题显示div
单击发送时显示div

---

工作示例：

尝试以下操作：

//Controller
app.controller('three_panel_controller', function () {
   $scope.switch_panel = false;
   $scope.currentTab = 'first';
})

//View
<div class="panel panel-default no_box_shadow no_border_radius" ng-app="" ng-controller="three_panel_controller">
                <div class="panel-heading cursor_pointer no_box_shadow border_bottom_none text-center no_border_radius">
                    <div class="row ">
ng-click changed -->        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center clicked_section_background_color padding_top_bottom_15" ng-click="currentTab=first"
                             ng-class="{clicked_section_background_color : switch_panel, unclicked_section_background_color : !switch_panel}">
                            <span class="font_size_14">Compose</span>
                        </div>
ng-click changed -->        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15 unclicked_section_background_color" ng-click="currentTab=second"
                             ng-class="{unclicked_section_background_color : switch_panel , clicked_section_background_color : !switch_panel}">
                            <span class="font_size_14">Subject</span>
                        </div>
ng-click changed -->        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center padding_top_bottom_15" ng-click="currentTab=third">
                            <span class="font_size_14">Send</span>
                        </div>
                    </div>
                </div>
<div class="panelbody" ng-if="currentTab=first">    <-- added ng-if
    <span>Show div on compose click</span>
</div>

<div class="panelbody" ng-if="currentTab=second">    <-- added ng-if
  <span>Show div on subject click</span>
</div>

<div class="panelbody" ng-if="currentTab=third">    <-- added ng-if
  <span>Show div on send click</span>
</div>

//控制器
应用控制器（“三面板控制器”，功能（）{
$scope.switch_panel=false；
$scope.currentTab='first'；
})
//看法
ng单击已更改-->
组成
ng单击已更改-->
主题
ng单击已更改-->
发送
我也试过，但没用。你能用我的代码演示这个工作示例吗？检查。第二个面板中的ng类属性似乎有误。谢谢。。我想为第三个面板标题也这样做。。这就是为什么我不知道如何才能为第三个面板做到这一点。谢谢，但面板的主体也应该得到改变。。所以，当我单击“撰写”面板时，应该只显示其内容。其他人不应该被展示；和组合面板标题部分应该是第一个被激活的。你不能创建一个范围变量吗。然后将此变量的值设置为应显示的选项卡。然后向每个选项卡内容HTML添加
ng if
，以检查是否应选择该选项卡