Question

我需要一个可切换的按钮。基本上我需要它在设计A与链接A之间切换，设计B与链接B，再返回设计A与链接A，再次点击。我一直在用CSS和JavaScript惨遭失败，仅仅因为我已经编写了7年多的时间。它回到了诺布Q.

我的想法是我想要一个带链接的.gif文件，用另一个链接换成另一个.gif文件，点击后，最后一个更改回第一个点击时。另一个非常好的解决方案是突出显示一段文本（即使用CSS），然后使用突出显示更改链接，然后再次删除突出显示恢复到第一个链接的突出显示。我愿意接受解决方案。

我希望我有意义，希望有人可以提供帮助。

Answer 1

解决此问题的最佳方法是将两个设计包装在一个父div下，该div负责状态。这样，您只需在一个位置切换CSS类即可管理哪一个是可见的。这是jQuery的一个例子。

<强> HTML

<div class="controls">
  <a class="control active js-show-design1" href="#">Link 1</a>
  <a class="control js-show-design2" href="#">Link 2</a>
</div>

<div class="state-container">

  <div class="design1"> Some content </div>
  <div class="design2"> Some other content </div>

</div>

<强> CSS

.control.active {
  text-decoration: none;
  color: black;
}

.state-container .design2{
  display: none;
}

.state-container.show-design2 .design2{
  display: block;
}
.state-container.show-design2 .design1{
  display: none;
}

<强> JQUERY

controls = $('.control');
ctr = $('.state-container');

$('.js-show-design2').click(function(){
  controls.removeClass('active');
  this.addClass('active');

  ctr.addClass('show-design2');
});

$('.js-show-design1').click(function(){
  controls.removeClass('active');
  this.addClass('active');

  ctr.removeClass('show-design2');
});

请注意，此解决方案仅用于在两个视图之间切换。您需要进行一些调整才能将其扩展为支持3个或更多。

我需要一个可切换的按钮，而且我生锈了

1 个答案: