Wednesday, November 17, 2010

How do I make the text on a website change when the user click a link without leaving the page?

For instance, I want the description paragraph to change for every link that is clicked.How do I make the text on a website change when the user click a link without leaving the page?
you can do it using javaScript:



%26lt;div id=';myDiv';%26gt;

this is some text which has been loaded with the page.

%26lt;/div%26gt;

%26lt;a href=';#'; onclick=';document.getElementById('myDiv'… is some another cool looking text'';%26gt;click me%26lt;/a%26gt;





you create a div tag and name it ';myDiv';.

in this tag will be all the text you need.



the link button has the onclick attribute which changes the ';myDiv'; text to something else.How do I make the text on a website change when the user click a link without leaving the page?
You can use either frames or javascript, find about both at: http://www.w3schools.com
eric,



This may not be exactly what you had in mind, but it's pretty simple and could be modified. If you copy the code below into a file and save it as a web page, you'll see a demo of adding text with a button (which could be changed to a link).



%26lt;html%26gt;

%26lt;head%26gt;

%26lt;title%26gt;Javascript Change Div InnerHTML%26lt;/title%26gt;



%26lt;script language=';javascript'; type=';text/javascript';%26gt;



function changeDivHTML()

{

var previousInnerHTML = new String();



previousInnerHTML = document.getElementById('div1').innerHTM…



previousInnerHTML = previousInnerHTML.concat(';%26lt;h1%26gt;New HTML Text added to the div HTML tag.%26lt;/h1%26gt;';);



previousInnerHTML = previousInnerHTML.concat(';%26lt;p align=\';center\';%26gt;Paragraph child HTML element added
to the div tag dynamically.%26lt;/p%26gt;';);



previousInnerHTML = previousInnerHTML.concat(';%26lt;span style=\';color:#ff0000\';%26gt;Span child HTML element added to the div tag dynamically.%26lt;/span%26gt;';);



document.getElementById('div1').innerHTM… = previousInnerHTML;

}



%26lt;/script%26gt;



%26lt;/head%26gt;



%26lt;body%26gt;



%26lt;div id=';div1';%26gt;

%26lt;b%26gt;innerHTML%26lt;/b%26gt; placed inside the %26lt;b%26gt;div%26lt;/b%26gt; element of HTML.


Javascript will change the innerHTML of this HTML div element.

%26lt;/div%26gt;

%26lt;center%26gt;

%26lt;input type=';button'; value=';Change Div innerHTML'; onclick=';changeDivHTML()'; /%26gt;

%26lt;/center%26gt;

%26lt;/body%26gt;

%26lt;/html%26gt;

No comments:

Post a Comment