Onclick拨动开关

Question

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

我希望标题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>

Answer 1

$('ul.customize-tabs-home li').on('click', function() {
  $(this).parent().find('li.activeprodborder').removeClass('activeprodborder');
  $(this).addClass('activeprodborder');
  if($(this).index() == 0) {
    $(this).css('border-color', 'green');
  } else if($(this).index() == 1) {
    $(this).css('border-color', 'blue');
  }
});

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

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

这就是您所需要的吗？ 您可以使用id来检查要切换的标头，而不是检查索引。

Answer 2

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

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

Answer 3

为常用细节添加另一种样式，仅更改活动状态的颜色。

您可以使用:first-child和:last-child将每个元素定位为不同的颜色。如果最后使用两个以上元素，则可以使用:nth-child()或其他类。

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

/*Common Class*/

.customize-tabs-home li {
  background-color: white;
  border: 4px solid grey;
}


/*Active*/
.customize-tabs-home li:first-child.activeprodborder {
  border-color: green;
}

.customize-tabs-home li:last-child.activeprodborder {
  border-color: blue;
}

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

还请注意，div不是ul的有效子代。

Answer 4

如果您希望两个li在单击时具有不同的颜色，则应为每个id提供一个颜色，以便您知道要为每种颜色添加哪种颜色。

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

<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" id="headerone">
      <a href="#">
        <div>
          <h1>Header One</h1>
        </div>
      </a>
    </li>
    <li id="headertwo">
      <a href="#">
        <div>
          <h1>Header Two</h1>
        </div>
      </a>
    </li>
  </div>
</ul>
<script>
$('ul.customize-tabs-home li').on('click', function() {
  $(this).parent().find('li.activeprodborder').removeClass('activeprodborder');
  $(this).parent().find('li.secondactiveprodborder').removeClass('secondactiveprodborder');
  var elemId = $(this).attr('id');
  if(elemId=="headerone"){
  $(this).addClass('activeprodborder');
  } else if(elemId=="headertwo"){
  $(this).addClass('secondactiveprodborder');
  } else {
  //default
  }
});
</script>