Change the contents of the div without refreshing the page

Question

I’m new, take it easy on the answers. hahahaha

I have a div in the middle of the page and I want to change its description by clicking on a button. I wanted to create about 5 pages inside the div, so to speak. I created two buttons, one to move forward and one to return, but I don’t want the page to keep refreshing all the time, I just want that when I press the button to move forward and then return, the description of the div changes as I click to give the impression that I skipped the chapter of history. Someone knows how to do it?

[Edit]

This is the picture of the div I want you to change the text. There’s a button down there (skip to the next chapter), I want when I click on that button, the description of Dive changes. photo

Answer 1

Assuming your div id is "bla", something like

<div id=bla> ... </div>

the most crude way to change content dynamically is to do something like this in Javascript:

document.getElementById("bla").innerHTML = "novo conteudo da div";

This is the foundation of the process. Then of course, you will have to turn on the Javascript code to the forward and return buttons.

Answer 2

I am learning jQuery and this is not the best and most semantic solution but it solves your problem if the content is static. I added jQuery library to run.

$(function(){

    $("div").css("display", "none");
    $("div#div1").addClass("active");

    $("a").on("click", function( e ){         
      e.preventDefault();
        
    	$("div").removeClass("active");
        var id = $(this).attr("href"); 
        $("#"+id+"").addClass("active");
        
    });
});

.active { display: block !important }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
    <li><a href="div1">DIV1</a></li>
    <li><a href="div2">DIV2</a></li>
    <li><a href="div3">DIV3</a></li>
    <li><a href="div4">DIV4</a></li>
    <li><a href="div5">DIV5</a></li>
</ul>
<div id="div1">conteudo 1</div>
<div id="div2">conteudo 2</div>
<div id="div3">conteudo 3</div>
<div id="div4">conteudo 4</div>
<div id="div5">conteudo 5</div>

Answer 3

You can achieve this effect using a plugin slider, in case I’m using the bxslider

It is necessary to add certain libraries first:

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

<div id="offers" class="col-md-9">
    <ul id="offers-slide">
        <li>
            <div class="item-offer">
                <div class="product-thumb">
                    <img src="img/products/product4.jpg" />
                </div>
                <div class="product-description">
                    resumo resumo resumo resumo
                </div>
            </div>
        </li>
        <li>
            <div class="item-offer">
                <div class="product-thumb">
                    <img src="img/products/product2.jpg" />
                </div>
                <div class="product-description">
                    Texto Texto Texto Texto Texto Texto
                    Texto Texto Texto Texto Texto Texto
                    Texto Texto Texto Texto Texto Texto
                    Texto Texto Texto Texto Texto Texto
                </div>
            </div>
        </li>
    </ul>
</div>

And add this line to your javascript (with the id of your Divs container clear):

$('#offers-slide').bxSlider({
    slideWidth: 812,
    minSlides: 1,
    maxSlides: 1,
    moveSlides: 1,
    auto: true
});

Will stay this way:

Highlighted in black the pass selectors of slider