Toggle tag href "a" when clicking on other elements

Navigation
0

I have two payment selection buttons where when I select a button, a third button to end the payment has its href changed, according to the option chosen.

Codepen demo: link

    
asked by anonymous 08.04.2015 / 19:56

2 answers

3

First, list 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 just need to pass the value of the clicked data 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 have helped.

    
08.04.2015 / 20:26
1

One suggestion would be to add a date attribute on the menu button and change the href attribute and the text of the buy button as the button clicked, see 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><divclass="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>
    
08.04.2015 / 20:37
Implement Numeric Keypad Why object is not being instantiated?