Question

我想设计一个订阅按钮。当用户订阅其他用户时，该按钮会将文本更改为UnSubscribe 喜欢：YouTube

HREF = “＃退订”

HREF = “＃订阅”

HREF =“＃login_required

.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

<a href="#unsubscribe" class="btn" type="button">Subscribe</a>
<a href="#subscribe" class="btn" type="button">UnSubscribe</a>

Answer 1

您需要使用 jQuery / Javascript 来实现此功能，检查按钮内的文字，并根据按钮内的文字基础将文字更改为subscribe＆amp; unsubscribe。像：

$('.btn').on('click', function() {
  if($(this).text() == 'Subscribe') {
    $(this).text('UnSubscribe');
    $(this).attr('href', '#subscribe');
  } else {
    $(this).text('Subscribe');
    $(this).attr('href', '#unsubscribe');
  }
});

请看下面的代码段：

$('.btn').on('click', function() {
  if($(this).text() == 'Subscribe') {
    $(this).text('UnSubscribe');
    $(this).attr('href', '#subscribe');
  } else {
    $(this).text('Subscribe');
    $(this).attr('href', '#unsubscribe');
  }
});

.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#unsubscribe" class="btn" type="button">Subscribe</a>
<a href="#subscribe" class="btn" type="button">UnSubscribe</a>

希望这有帮助！

订阅按钮设置和点击unSubscribe后

1 个答案: