Toggle page content by changing div only

Question

Toggle page content by changing div only

Navigation

#1 by (1 votes)

0

I'm creating a website, where I want to use the div from the main page to switch between other pages. For example, I have the 'index', 'content 1' and 'content 2'. I want to make when I click the link, change the content from 'index' to 'content 1', without having to load another page, maintaining the normal logo, menu and footer of the site.

I want to know how I do this in code, because I've tried some that I've seen the guys doing, in many ways and did not work, the div is not changing to the page div I requested. Remember that I use Wamp, the page has the library link in the header and etc. etc.

Edited: So @AsuraKhan, I read your answer and went to seek to understand more about, but it has not yet come to clarity. I made a brief summary of what I'm trying to do here for you to understand what I want to do. Example:

Index.html

</head>
<body>
    <div id="menu">
        <ul>
        <li>
        <a href="conteudo2.html" id="a1">Conteudo 2</a>
        </li>
        <a href="conteudo3.html" id="a2">Conteudo 3</a>
        <li>
        </li>
        </ul>
    </div>
    <div id="conteudo" class="content">
    <h1>CONTEUDO 1</h1>

</body>

Content 2 (content2.html) and 3 only change the class, the id is the same.

And the script I'm trying is this:

<script type="text/javascript">
    function Load(View){
       $("#conteudo").load(View);
    };
      $(document).ready(function(e) {
       $("#a1").click(function(e) {
         Load('conteudo2.html'); 
       });
       $("#a2").click(function(e) {
         Load('conteudo3.html'); 
       });
    });
</script>

Basically that's it, I can not decipher the error.

html jquery

asked by anonymous 01.02.2017 / 22:56

1 answer

Filling and importing data with VBA in excel, help in code? .htaccess problem for addressing without www

score 1 · Answer 1

About ajax

Basically, ajax is when you make a call to a script (it does not matter if it is php , json , asp , javascript , html ). This call causes javascript to search for a file on the server, which will specify what it is, for example:

$(".buttonOuDiv").click(function(){
    $.get("outraPagina.html", function(data, status){
        $(".classDaDiv").html(data)
    });
});

Notice that there is callback in the click(callback) function, when the Div or button (if desired) is clicked. This will cause the code to execute what is inside that callback . That's where we got to Ajax. Where through the GET method, we will call the file another Page.html and this will provide us with some parameters.

Date is the content that was returned by ajax, so it is the outraPagina.html page within .classDaDiv through the .html function to load the date within the div you choose.

Status is optional, it only shows the response status of HTTP , where it can be 404 (not found, 200 (OK), 400 p>

Note that to use ajax, you must use a Web Server. I see that you are using WAMP, so it should work.