Javascript 我需要一个可切换的按钮，我'；我生锈了

我需要一个可切换的按钮。基本上，我需要它在设计A和链接A之间切换，在设计B和链接B之间切换，然后在再次单击时返回到设计A和链接A。 我在CSS和JavaScript方面一直失败得很惨，仅仅是因为我已经7年多没有编写代码了。回到noob Q's

我的想法是，我想要一个带有链接的.gif文件，当单击时，它会变成另一个带有另一个链接的.gif文件，最后一个文件会在单击时变回第一个文件。 另一个非常好的解决方案是突出显示一段文本（即使用CSS），然后使用突出显示更改链接，然后删除突出显示并再次恢复到第一个链接。我对解决问题持开放态度

---

我希望我说的有道理，我希望有人能帮上忙。

解决这个问题的最好办法是将两个设计都封装在一个主管国家的父部门之下。这样，您只需在一个位置切换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>

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个或更多。

一个简单的解决方案是在页面上同时使用两个按钮，并使用onClick函数和add/remove类，在CSS display none/block之间切换。我发现这也有帮助：我从你的问题中得到的是，你有两种不同的样式（css），当你点击第一个链接时，第一个适用，当你点击第二个时，第二个适用。通过CSS/JS实现这一点的一个简单方法是切换类。。你知道元素类。例如：

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');
});