All geek questions in one place

How to make loading a button on the same page?

Those who read this will simply be grateful for trying to help me.

Anyway, I'm new to coding. My problem is that I have several buttons, actually for a theme layout that I am trying to achieve as a young newbie, but I cannot figure out how to get these buttons to click and load only 1 specific on the page. Others say that it can be done by Ajax or JQuery or Javascript, but I have no idea, I only know HTML / CSS and what it really is ... I don’t even know what the name of the term I want to make is.

Can someone give me the simplest solution or example for me?

I tried my best to do it myself and research, but I think my skills were not yet talented enough to correct the situation. I even tried to turn to my ingenious brother for help, but so far he has never done anything easy for me or holds out his hand to me, even when I'm just trying to learn. He is just busy, as he always says.

This is what I tried to do so far: http://animiao.com/IMVU%20Coding/sample3.php Perce, suppose the box is displayed by default (for example, the home page), and the other three buttons should show their own information.

Problems: They are displayed only in the order when I click the Chat> Message> Add button, and not in any other order. When I click on them again, they are not displayed.

Guess my methods are wrong, please help.

+4
source share
4 answers

All <div> are stacked on top of each other, and none of them has a z-index specified in CSS. As a result, the one that appears at the top will be what is a) the last in the HTML code

and b) visible

The easiest way to fix this is to wrap your div divs in another div:

 <div id="content_wrapper"> <div id="random">something...</div> <div id="chat">something...</div> ... </div>

And then hide those that are not needed with this JS:

 var contents = document.getElementById('content_wrapper').childNodes, i = 0, i_max = contents.length; for (i; i < i_max; i++) { contents[i].style.display = 'none'; }

And follow this "show" code:

 var el = document.getElementById(id); if (el.style.display == 'none') el.style.display = 'block';

This can be reduced to reducing code with ease, but it will also make it less obvious to you, so I will leave it like this for now.

0
source

It would be no harm if you learn a little javascript A simple example for javascript

save these two lines as ajax_sample.txt

 <p>AJAX is not a new programming language.</p> <p>AJAX is a technique for creating fast and dynamic web pages.</p>

now create one file like say a.html

 <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>

try downloading a.html file

0
source

The problem is that you are showing an element that you do not hide the rest: if you do, for example,

 var el = document.getElementById(id);//id = chat if (el.style.display == 'none')

you also need to hide the rest of the elements:

  var message = document.getElementById('message'); var add = document.getElementById('add'); message.style.display == 'none'; add .style.display == 'none';
0
source

html part:

 <input type="button" id="button1" value="Button1"></input> <input type="button" id="button2" value="Button2"></input> <input type="button" id="button3" value="Button3"></input> <div id="content-of-button"> </div>

jquery: if you don't know how to put jquery code in your page, and put jquery or javascript code inside this tag.

 $(document).ready(function(){ var button1content='Button 1 content'; var button2content='Button 2 content'; var button3content='Button 3 content'; $('#button1').click(function(){ $('#content-of-button').html(button1content); //here .html overwrites the text inside of the target div //you can also use .append() but it will add the text, not overwrite }); $('#button2').click(function(){ $('#content-of-button').html(button2content); }); $('#button3').click(function(){ $('#content-of-button').html(button3content); }); });

Remember to import the jquery library into your head tag. Also here is the code you can check: http://jsfiddle.net/4BpLg/6/

0
source

Source: https://habr.com/ru/post/1439381/

More articles:


All Articles