SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Switching the text of a link

    Hi,

    i have this code below. When it is loaded it shows a link with the text "Estado 1". When you click it, it should be replaced by another link with the text "Estado 2". When you click on "Estado 2" the link "Estado 1" should appear again and so on...


    HTML Code:
    	<script type="text/javascript">
    		function cambio(){
    			var capa = document.getElementById("estado1");
    			if (capa.id == "estado1")
                                {
                                    capa.innerHTML = <a href="#" onclick="cambio()">Estado 2</a>;
    
                                    capa.id = "estado2";
                                }
                            else{
                                   capa.innerHTML = <a href="#" onclick="cambio()">Estado 1</a>;
                                   capa.id = "estado1";
                            }
                            //capa.innerHTML= (capa.style.display == "none") ? "block" : "none";
    
                           
    		}
    	</script>
    </head>
    <body>
    	<div>
    
    		<div id="estado1">
    		          <a href="#" onclick="cambio()">Estado 1</a>
    		</div>
    
    	</div>

    My problem: after clicking "Estado 1" the sentence "Estado 2" is showed, but not as a link but as plain text..

    Javi

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Nova Scotia, Canada
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a bit of code with jQuery, it should work just the same.
    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$("a.toggleme").click(function () {
    		$("a.toggleme").toggle();
    	});
    });
    </script>
    </head>
    <body>
    
    <a href="#" class="toggleme">Estado 1</a>
    <a href="#" class="toggleme" style="display:none">Estado 2</a>
    
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •