Toggle "a" href by clicking on other elements

Question

I have two payment selection buttons where when selecting a button, a third button to finalize the payment has your href changed, according to the chosen option.

Demonstration in the codepen: http://codepen.io/flashpremium/pen/xbzzry

Answer 1

First, enter the button links in an HTML attribute, such as data-rel, for example

HTML

<div data-rel="http://www.link1.com.br" class="menu_button">
    <i class="fa fa-paypal"></i> PayPal
</div>

<div data-rel="http://www.link2.com.br" class="menu_button">
    <i class="fa fa-google-wallet"></i>  PagSeguro
</div>

<a class="btn-checkout" href="">Pagar </a>

Now in the click action, you only need to pass the value of the clicked data-rel to the href of the third button.

JS

$(document).ready(function(){
    $('.menu_button').click(function() {
      $(this).addClass('selected').siblings().removeClass('selected');
      $(".btn-checkout").attr("href", $(this).attr("data-rel"));
    });
});

And that’s it, I hope I helped.

Answer 2

A suggestion would be to add a date attribute to the menu button and change the attribute href and the text of the buy button as per the button clicked, see the example:

$(document).ready(function(){
     $('.menu_button').click(function() {
          $(this).addClass('selected').siblings().removeClass('selected');
          //Altera o atributo href do link
          $('.btn-checkout').attr('href',$(this).data('url'));
          //Altera o texto conforme o botão clicado
          $('.btn-checkout span').text($(this).text());
     });
});

body {
  font-family: arial;
  background: #fff;
  margin: 0 auto;
}

.off-canvas-cart {
  width: 250px;
  height: 1080px;
  background: #f2f2f2;
  margin: 0 auto;
  float: right;
}

.menu_button {
    padding: 10px 20px 10px 20px;
    position: relative;
    color: #fff;
  width: 50%;
    font-size: 14px;
    cursor: pointer;
  -webkit-transition: 250ms;
  margin-left: 10px;
  border-radius: 4px;
  background: #868696; background-size: 60%; background-position: 50% 50%; width: 180px; height: 40px;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  box-shadow: 0 2px 0 0 #6c6c7d;
}

.menu_button:hover {
    color: #fff;
    -webkit-transition: 250ms;

}

.menu_button:active {
    color: #ccc;
}

.menu_button.selected {
    background: #43434a;
  box-shadow: inset 0 0 0 .2em #279ad1;
  transition: 250ms;


}



.menu_button.selected:before {
  width: 20px;
  height: 20px;
  margin-top: 25px;
  content: '';
  background: #279ad1;
}

.btn-checkout {
  width: 250px;
  height: 50px;
  line-height: 50px;
  background: #019df4;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  margin-top: 25px;
  text-align: center;  
  position: absolute;
  box-shadow: 0 2px 0 0 #017cc1;
  border-radius: 4px;
  transition: 250ms;
}

.btn-checkout:hover {
  background: #2FAEF5;
  color: #fff;
  text-decoration: none;
}

.btn-checkout:active {
  box-shadow: 0 0px 0 0 #017cc1;
  background: #2FAEF5;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas-cart">

<div class="menu_button selected" data-url="http://www.paypal.com">
  <i class="fa fa-paypal"></i>
  PayPal
  </div>
  
  <div class="menu_button" data-url="http://www.pagseguro.com.br">
    <i class="fa fa-google-wallet"></i>  
  PagSeguro
  </div>
      <a class="btn-checkout" href="http://www.paypal.com">Pagar com <span>PayPal</span></a> 

</div>