Change Text within a paragraph when link is clicked JQuery/HTML

Question

I trying to do something which I think will be simple but I can't seem to get anywhere. I have a small navigation bar with a couple of links then an area of text. What I want to happen is when I click on a click the paragraph of text will change to the link it relates to.

I have tried the following among many things (forgive me I haven't used JQuery or javascript in quite a while) It doesn't appear to do anything whatsoever!

I am open to looking at new ways of achieving the desired effect.

 var ptext; $(document).ready(function(){ ptext = $("#pchange"); $(".one").click(function(){ ptext.html("text1"); }); $(".two").click(function(){ ptext.html("tex2"); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } h2 { color: white; } /* Style the header */ header { background-color: #2B547E; padding: 30px; text-align: center; font-size: 35px; color: white; } /* Create two columns/boxes that floats next to each other */ nav { float: left; width: 30%; height: 300px; /* only for demonstration, should be removed */ background: #43BFC7; padding: 20px; } /* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; } article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be removed */ } /* Clear floats after the columns */ section:after { content: ""; display: table; clear: both; } /* Style the footer */ footer { background-color: #2B3856; padding: 10px; text-align: center; color: white; } /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */ @media (max-width: 600px) { nav, article { width: 100%; height: auto; } } </style> <header> <h2>Voice of the Theatre</h2> <img src="http://pngimg.com/uploads/world_map/world_map_PNG14.png" width="100px" height="60px"> </header> <section> <nav> <ul> <li><a class="one" href="#">EMEAR</a></li> <li><a class="two" href="#">AMER</a></li> </ul> </nav> <article> <h1>London</h1> <div id="pchange"> </div> <ul> <li>Update 1 </li> <li>Update 2</li> <li>Update 3</li> </ul> <h1>America</h1> <ul> <li>Update 1 </li> <li>Update 2</li> <li>Update 3</li> </ul> </article> </section> <footer> <p></p> </footer> 

Answer 1

you can either remove the href from the a tag or add event.preventDefault() so that the link is no longer working like it should.

also if you only want to change the text content of an element use .text() and not .html()

 var ptext; $(document).ready(function() { ptext = $("#pchange"); $(".one").click(function(event) { event.preventDefault(); ptext.text("text1"); }); $(".two").click(function(event) { event.preventDefault(); ptext.html("tex2"); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } h2 { color: white; } /* Style the header */ header { background-color: #2B547E; padding: 30px; text-align: center; font-size: 35px; color: white; } /* Create two columns/boxes that floats next to each other */ nav { float: left; width: 30%; height: 300px; /* only for demonstration, should be removed */ background: #43BFC7; padding: 20px; } /* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; } article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be removed */ } /* Clear floats after the columns */ section:after { content: ""; display: table; clear: both; } /* Style the footer */ footer { background-color: #2B3856; padding: 10px; text-align: center; color: white; } /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */ @media (max-width: 600px) { nav, article { width: 100%; height: auto; } } </style> <header> <h2>Voice of the Theatre</h2> <img src="http://pngimg.com/uploads/world_map/world_map_PNG14.png" width="100px" height="60px"> </header> <section> <nav> <ul> <li><a class="one" href="#">EMEAR</a></li> <li><a class="two" href="#">AMER</a></li> </ul> </nav> <article> <h1>London</h1> <div id="pchange"> </div> <ul> <li>Update 1 </li> <li>Update 2</li> <li>Update 3</li> </ul> <h1>America</h1> <ul> <li>Update 1 </li> <li>Update 2</li> <li>Update 3</li> </ul> </article> </section> <footer> <p></p> </footer> 

Answer 2

can you add the href="javascript:void(0)" or event.preventDefault() or event.preventDefault(); event.stopPropagation(); you can choose any one.

your script changes the HTML but its work .html() or .text() but .text() is the best beacuse text is mean the inner text html means the others element.

first, you click the nav ul li a button and just get this text and change your target element text.

Work fine...

Thank you

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> var ptext; $(document).ready(function(){ ptext = $("#pchange"); $("nav ul li a").click(function(event){ ptext.html($(this).text()); }); }); </script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } h2 { color: white; } /* Style the header */ header { background-color: #2B547E; padding: 30px; text-align: center; font-size: 35px; color: white; } /* Create two columns/boxes that floats next to each other */ nav { float: left; width: 30%; height: 300px; /* only for demonstration, should be removed */ background: #43BFC7; padding: 20px; } /* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; } article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be removed */ } /* Clear floats after the columns */ section:after { content: ""; display: table; clear: both; } /* Style the footer */ footer { background-color: #2B3856; padding: 10px; text-align: center; color: white; } /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */ @media (max-width: 600px) { nav, article { width: 100%; height: auto; } } </style> <header> <h2>Voice of the Theatre</h2> <img src="http://pngimg.com/uploads/world_map/world_map_PNG14.png" width="100px" height="60px"> </header> <section> <nav> <ul> <li><a class="one" href="javascript:void(0)">EMEAR</a></li> <li><a class="two" href="javascript:void(0)">AMER</a></li> </ul> </nav> <article> <h1>London</h1> <div id="pchange"> </div> <ul> <li>Update 1 </li> <li>Update 2</li> <li>Update 3</li> </ul> <h1>America</h1> <ul> <li>Update 1 </li> <li>Update 2</li> <li>Update 3</li> </ul> </article> </section> <footer> <p></p> </footer>