Question

我有一个小组，分为3个部分。

当我点击其他部分时，它的背景颜色应随其文本颜色一起变化，根据它，面板主体内容应该更改。

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

 .clicked_section_background_color{
      background: #2fabe9;
      color:#ffffff;
    }

    .unclicked_section_background_color{
      background: #f5f5f5;
      color:#000000;
    }

.padding_top_bottom_15{
  padding-top:15px;
  padding-bottom:15px;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<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 ">
                            <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 = !switch_panel"
                                 ng-class="{clicked_section_background_color : switch_panel, unclicked_section_background_color : !switch_panel}">
                                <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 = !switch_panel"
                                 ng-class="{unclicked_section_background_color : switch_panel , clicked_section_background_color : !switch_panel}">
                                <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">
    <span>Show div on compose click</span>
  </div>
  
  <div class="panelbody">
    <span>Show div on subject click</span>
  </div>
  
  <div class="panelbody">
    <span>Show div on send click</span>
  </div>
                </div>

just like in the image

任何帮助都会很棒。

谢谢。

Answer 1

您可以通过为每个面板分配ID来跟踪范围变量switch_panel中选择的是哪一个：

   <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>

工作样本：https://plnkr.co/edit/0eDZX467y22tDuW7wMef?p=preview

Answer 2

尝试这样的事情：

//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>

根据单击和显示面板主体内容更改面板标题颜色

2 个答案: