Question

我希望在点击时更改我的按钮颜色，并且我还想保留更改，我的意思是即使重新加载页面，按钮也会被激活。

这是我的代码---

stack(d)
#  values ind
#1     ad   1
#2     af   1
#3     bc   2
#4     bd   2
#5     be   2

这个剧本---

<a id="mylink" class="allow" href="#"><button class="btn btn-default btn-xs">{% trans %}Allow{% endtrans %}</button></a>

但它不会改变颜色，也不会在重新加载时显示它是否有效。任何人都可以帮我解决这个问题。非常感谢先进。

Answer 1

如果不在服务器上存储状态，则需要使用sessionStorage或localStorage

实质性更新：我知道您在使用color时也使用background-color。使用$(document).ready()和jquery：

<script type="text/javascript">
$( document ).ready(function() {
  if(localStorage.getItem('isCliked'){
      $('#mylink').css('background-color','green');
  }
  $('#mylink').on('click',function() {
    $('#mylink').css('background-color','green');
    // set the value upon clicking
    localStorage.setItem('isCliked', true)
  });
});

</script>

此外，由于您使用的是Bootstrap，因此可以使用jquery中的类操作

<script type="text/javascript">
$( document ).ready(function() {
  if(localStorage.getItem('isCliked'){
      $( "#mylink" ).addClass( 'btn-success' );

      $( "#mylink" ).removeClass( 'btn-default' );
  }
  $('#mylink').on('click',function() {
    $( this ).addClass( 'btn-success' );

    $( this ).removeClass( 'btn-default' );
    // set the value upon clicking
    localStorage.setItem('isCliked', true)
  });
});

</script>

重要：如果用户更改设备，此解决方案将不，因为按钮状态存储在本地。如果您需要强大的解决方案，则需要将状态存储在服务器上。

  $('#mylink').on('click',function() {
    <AJAX CALL TO SERVER TO STORE STATE>
  });

在这种情况下，您的初始按钮呈现应该已经考虑到这一点（在服务<a>之前检查服务器） - 或者 - 您需要在$(document).ready()上进行另一次ajax调用。这取决于您的设计和要求。

<script type="text/javascript">
$( document ).ready(function() {

  <AJAX CALL TO QUERY THE SERVER ABOUT THE BUTTON STATE>
  <RENDER BUTTON ACCORDING TO RESULTS>

  $('#mylink').on('click',function() {
   <AJAX CALL TO SERVER TO STORE STATE>
  });
});

</script>

Answer 2

当重新加载网页时，浏览器会忘记以前的状态，除非您使用某些持久性（如本地存储或其他内容）并检查已保存的数据并自行恢复页面重新加载的任何元素的上一阶段。

Answer 3

您可以将其用于锚标记。

a:visited { 
    background-color: yellow;
}

Answer 4

如果你想改变按钮的颜色你可以使用jquery，但是如果你想要重新加载页面并且按钮颜色显示为更新的颜色：在此如果您需要为该颜色设置cookie或session值并应用于该按钮。

单击时如何更改按钮的颜色，即使重新加载也始终保持激活状态

4 个答案: