Question

我有一个面板标题，我将其分为两部分。

当我点击一个面板时，其背景为天蓝色，文字颜色为白色，而其他面板背景为灰色黑色文本颜色，然后单击该面板背景，文本颜色也会改变。

＆＃13;

.prefix_event {
  text-align: center;
  background: #f2f1f1;
  color: #555555;
  padding: 10px;
  font-size: 12px;
}
.prefix_previous {
  text-align: center;
  background: #24b6e3;
  color: #FFFFFF;
  padding: 10px;
  font-size: 12px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app class="row">
  <div class="col-md-12 col-sm-12 col-xs-12 ">
    <div class="panel panel-default set_padding_0 set_margin_0">
      <div class="panel-heading set_padding_0 set_margin_0 cursor_pointer">
        <div class="row set_margin_0">
          <div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_previous" ng-click="option='event_exhibitors'" ng-init="option='event_exhibitors'">
            Event Exhibitors
          </div>
          <div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_event" ng-click="option='previous_exhibitors'">
            Previous Exhibitors
          </div>
        </div>
      </div>
      <div class="panel-body" ng-show="option==='event_exhibitors'">
        <div class="row ">
          <div class="inner-addon right-addon col-md-12 col-sm-12 col-xs-12">
            <input type="text" class="form-control" placeholder="Search" />
            <i class="glyphicon glyphicon-search search_icon_color"></i>
          </div>
        </div>
      </div>


      <div class="panel-body" ng-show="option==='previous_exhibitors'">
        <div class="row ">
          <p>Previous Exhibitors</p>
          <p>Previous Exhibitors</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

我想要的是什么。点击之前的参展商面板。 活动参展商的背景颜色和文字颜色应该提供给之前的参展商， event_exhibitors 应该获得之前参展商的背景和文字颜色。所以在点击时反之亦然。

任何帮助都会很棒。

Answer 1

使用

中的切换选项非常简单

$scope.toggle="false";

您的HTML将是这样的

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12 ">
      <div class="panel panel-default set_padding_0 set_margin_0">
        <div class="panel-heading set_padding_0 set_margin_0 cursor_pointer">
          <div class="row set_margin_0">
            <div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_previous"
            ng-click="toggle = !toggle" 
            ng-class="{prefix_event : toggle, prefix_previous : !toggle}"
            >
              Event Exhibitors
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_event" 
         ng-click="toggle = !toggle" 
            ng-class="{'prefix_previous' : toggle}"
         >
              Previous Exhibitors
            </div>
          </div>
        </div>
        <div class="panel-body" ng-show="option==='event_exhibitors'">
          <div class="row ">
            <div class="inner-addon right-addon col-md-12 col-sm-12 col-xs-12">
              <input type="text" class="form-control" placeholder="Search" />
              <i class="glyphicon glyphicon-search search_icon_color"></i>
            </div>
          </div>
        </div>


        <div class="panel-body" ng-show="option==='previous_exhibitors'">
          <div class="row ">
            <p>Previous Exhibitors</p>
            <p>Previous Exhibitors</p>
          </div>
        </div>
      </div>
    </div>
  </div>

DEMO

更新1：同时检查同一链接中修改的plunker

更改这些@ 以前的参展商

<div class="panel-body" ng-show="!toggle">

更改这些@ 活动参展商

<div class="panel-body" ng-show="toggle">

Answer 2

您可以使用简单的Jquery来实现此功能。

Change colour of table row onclick

如果你使用class =“col-xs-12”那么它也会覆盖其他更高的尺寸并使它们成为12（col-sm-12，col-md-12，col-lg-12）。

http://getbootstrap.com/css/#grid

AngularJS：根据点击更改面板标题背景

2 个答案: