How to create a link that when clicked changes the value of href=""?

Asked

Viewed 581 times

1

I am creating a button to open the chat on one of my sites. I am currently using Zopim.

To open the chat, the link is used:

<a href="javascript:void($zopim.livechat.window.show())">ABRIR CHAT</a>

To close the chat, the link is used:

<a href="javascript:void($zopim.livechat.window.hide())">FECHAR CHAT</a>

I need you to when the person click to Abrir o Chat, automatically switch the link to Fechar o Chat and that when the person clicks on Fechar o Chat change to Abrir o Chat.

That is, it is alternating, when you click on one the link changes to the other.

So with the same button I can open and close the chat.

jquery

2 answers

4


There are several ways to do this. I would avoid inline Javascript (within href or other attribute). Something like this would be cleaner:

<a id="botao-chat" href="#">ABRIR CHAT</a>
<script>
var aberto = false;
$('#botao-chat').click(function() {
    if(aberto) {
        $(this).text('ABRIR CHAT');
        $zopim.livechat.window.hide();
    } else {
        $(this).text('FECHAR CHAT');
        $zopim.livechat.window.show();
    }
    aberto = !aberto;
    return false;
});
</script>

  • There is no way to be only 1 link no? Because it is 1 button, the same would have to open and close. :(

  • No jsFiddle: http://jsfiddle.net/AlexandreBR/g8r7wveo/1/

  • Example: http://iweb.com/dedicated-server. when you click on LIVE CHAT in the lower right corner, it opens and closes their chat.

  • I didn’t even see you edit the answer! hehe! It’s getting pretty good, only there’s a problem: When you click OPEN CHAT, it changes the text to CLOSE CHAT, but if you click CLOSE CHAT, it doesn’t change the text back.

  • http://jsfiddle.net/AlexandreBR/g8r7wveo/2/

  • Open your browser console and see the error. Zopim needs to be loaded (whatever it is).

  • Yes! True, now it’s 100%! Right answer!

  • It was 100% Vlw, it was even better because the link is href="#" there is no link Zopim.

  • It’s just that I hadn’t touched that I needed the Zopim working. I put it in jsFiddle and it wasn’t working. Rsrsrs

  • if it wasn’t too much to ask, could you quote another example? Like, instead of opening and closing the chat, a margin-top:20px; when I clicked.

  • @Alexandrelopes There’s another question... Check out http://api.jquery.com/css/#css2

  • I’m going to ask another question then. There’s no risk of my question being duplicated, right? I wanted when I clicked on the link <a> were given a margin-top:20px; in div containing the class .zopim

  • Pronto @bfavaretto http://answall.com/questions/28634/comorcriar-um-link-que-ao-clicado-muda-%C3%A9-added-a-property-css-in-u

Show 8 more comments

0

Hello friend to change the value of href on click use property setAttribute

see an example:

<a href="#" id="AbrirChat">ABRIR CHAT</a>
<a href="#" id="FecharChat">FECHAR CHAT</a>

<script type="text/javascript">
   document.getElementById("FecharChat").onclick = function() {
   var link = document.getElementById("AbrirChat");
   link.setAttribute("href", "abrir.html");
   return false;
   }
</script>

in this example the href property of OPEN CHAT changes as soon as you click CLOSE CHAT.

  • You don’t understand, I want to alternate the links! When click on A he changes to B and when you click on B he changes to A. In case it’s just 1 link, where the person can open and close the chat.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.