javascript - Onclick拨动开关

我有一个拨动开关。现在，一旦选定，这两个人将共享同一班级。如何处理代码，使它们一旦单击便具有不同的边框颜色？

我希望标题1在选择时具有绿色边框，而标题2在选择时具有蓝色边框。

$('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>

最佳答案

不确定是否是您要描述的内容，但是...

$('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>

关于javascript - Onclick拨动开关，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51735968/