Change the content of the div without refreshing the page [duplicate]

Question

Change the content of the div without refreshing the page [duplicate]

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I'm a newbie, take it easy with the answers. hahahaha

I have a div in the middle of the page and want to change the description of it by clicking a button. I wanted to create about 5 pages inside the div, so to speak. I created two buttons, one to go forward and one to return, but I do not want the page to be refreshing all the time, I just want it when I press the button to go ahead and then return, the description of the div changes as I click to give the impression that I skipped the chapter of history. Does anyone know how to do this?

[edit]

This is the photo of the div that I want to change the text. There's a button down there (move to the next chapter), I want it to change when I click that button. photo

javascript html ajax

asked by anonymous 14.08.2015 / 22:04

3 answers

Hide HTML img tag Versioning project with Visual Studio 2013 and 2015

score 3 · Answer 1

Assuming your div id is "bla", something like

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

The roughest way to dynamically change content is to do something like this in Javascript:

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

This is the foundation of the process. Of course, you'll have to link the Javascript code to the forward and back buttons.

score 1 · Answer 2

I'm learning jQuery and this is not the best and most semantic of the solutions but 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><ahref="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>

score 0 · Answer 3

You can achieve this by using a slider plugin, in case I'm using bxslider

You need 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
});

It will look like this:

Highlighted in black the slider pass selectors