Toggle page content by changing only the div

Asked

Viewed 513 times

0

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

I want to know how I do it in code, because I’ve tried some that I’ve seen the guys doing, in various ways and it didn’t work, the div is not changing to the div of the page I requested. Remembering that I use Wamp, the page has the library link in the header and etc.

Edited: So @Asurakhan, I read your answer and I tried to understand more about, but I still did not get clarity. I made a brief summary of what I’m trying to do here so you 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 changes class, id is the same.

And the script I’m trying to do 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>

That’s basically it, I can’t make the mistake.

jquery html

  • You’re talking about Ajax?

  • Yeah, @Asurakhan.

  • in the Load function, the $("content"). load(View), that content, shouldn’t it be #content? Since it is an ID.

  • I have already made this addition, both in him and in a1 and a2, still unsuccessful.

  • I forgot to mention that you have to put in a1 and a2 too, since they are id. And put these href with a #, or switch to something else.

1 answer

1

About ajax

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

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

Realize that there is a callback in function click(callback), when the Div or button (if desired) is clicked. This will cause the code to execute what is inside that callback. In that we come to Ajax. Where through the method GET, we will call the file otherPagina.html and this will provide us with some parameters.

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

Status is optional, it just shows the status of the reply HTTP, where can be 404 ( not found, 200 (OK ), 400 ( gave internal server problem ).

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

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.