javascript - 点击切换开关

Question

我有一个切换功能。现在，两人一经选中就同类。我如何操作代码，使它们在单击后具有不同的边框颜色？

我希望标题一在选中时具有绿色边框，而标题二在选中时具有蓝色边框。

$('ul.customize-tabs-home li').on('click', function() {
  $(this).parent().find('li.activeprodborder').removeClass('activeprodborder');
  $(this).addClass('activeprodborder');
});

.activeprodborder {
  background-color: white;
  border: 4px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customize-tabs-home">
  <div>
    <li class="activeprodborder">
      <a href="#">
        <div>
          <h1>Header One</h1>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <h1>Header Two</h1>
        </div>
      </a>
    </li>
  </div>
</ul>

Answer 1

不确定这是否是您所描述的，但是...

$('ul.customize-tabs-home li').on('click', function() {
  $(this).parent().find('li.activeprodborder').addClass('inactiveprodborder');
   $(this).removeClass('inactiveprodborder');
  $(this).addClass('activeprodborder');
});

.activeprodborder {
  background-color: white;
  border: 4px solid green;
}

.inactiveprodborder  {
  background-color: white;
  border: 4px solid orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customize-tabs-home">
  <div>
    <li class="activeprodborder">
      <a href="#">
        <div>
          <h1>Header One</h1>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <h1>Header Two</h1>
        </div>
      </a>
    </li>
  </div>
</ul>