Bootstrap按钮切换：首次访问与切换后不同激活样式实现问询

Hey there! Great question – you don’t need to add a second active class to make this work. The issue right now is that your CSS only defines one style for the active state, so both buttons look the same when activated. Let’s adjust things so the initial active button (Yes) is red, and any subsequent activated button (whether Yes or No after the first click) uses a different color.

Approach: Use an Extra Class for Initial State #

We’ll add a unique class to the initially active button, then define separate styles for that initial active state and the regular active state after switching.

Step-by-Step Modifications #

1. Update the HTML
   Add an initial-active class to the default active Yes button:

<div class="form-group">
  <div class="btn-group btn-group-justified btn-switch-justified">
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch active initial-active">
        <span class="goods">Yes</span>
      </button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch">
        <span class="services">No</span>
      </button>
    </div>
  </div>
</div>

2. Adjust the CSS
   Define distinct styles for the initial active state and the post-switch active state:

/* Initial active state (red for Yes on first load) */
.btn-switch.initial-active { 
  background: #e46a5d!important; 
  color: #fff; 
  font-weight: normal; 
  text-shadow: none; 
}

/* Active state after switching (use your desired second color here) */
.btn-switch.active:not(.initial-active) { 
  background: #5bc0de!important; /* Example: Bootstrap info blue */
  color: #fff;
  font-weight: normal;
  text-shadow: none;
}

.btn { padding: 6px 51px; }

3. Tweak the JavaScript
   When a button is clicked, remove both active and initial-active from all buttons in the group, then add active to the clicked one. This ensures the initial red style only applies on page load:

$('.btn-switch').click(function() {
  var $group = $(this).closest('.form-group');
  $('.btn-switch', $group).removeClass("active initial-active");
  $(this).addClass("active");
});

How It Works #

• On page load, the Yes button has both active and initial-active, so it uses the red style.
• When any button is clicked, we strip both classes from all buttons in the group, then mark the clicked one as active. Since initial-active is removed, the clicked button will use the second color style (and this applies to both Yes and No after the first click).

Full Working Code #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style>
.btn-switch.initial-active { 
  background: #e46a5d!important; 
  color: #fff; 
  font-weight: normal; 
  text-shadow: none; 
}

.btn-switch.active:not(.initial-active) { 
  background: #5bc0de!important;
  color: #fff;
  font-weight: normal;
  text-shadow: none;
}

.btn { padding: 6px 51px; }
</style>

<div class="form-group">
  <div class="btn-group btn-group-justified btn-switch-justified">
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch active initial-active">
        <span class="goods">Yes</span>
      </button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-switch">
        <span class="services">No</span>
      </button>
    </div>
  </div>
</div>

<script>
$('.btn-switch').click(function() {
  var $group = $(this).closest('.form-group');
  $('.btn-switch', $group).removeClass("active initial-active");
  $(this).addClass("active");
});
</script>

内容的提问来源于stack exchange，提问作者Janath