1

Sou novato, peguem leve com as respostas. hahahaha

Tenho uma div no meio da página e quero mudar a descrição dela clicando em um botão. Queria criar umas 5 páginas dentro da div, digamos assim. Criei dois botões, um de avançar e outro de retornar, mas não quero que a página fique dando refresh o tempo todo, quero apenas que, quando eu apertar o botão para avançar e depois retornar, a descrição da div mude conforme eu clico para dar a impressão de que pulei o capítulo da história. Alguém sabe como fazer isso?

[edit]

Essa aqui é a foto da div que eu quero que mude o texto. Tem um botão ali embaixo (avançar para o próximo capítulo), quero que, quando eu clicar naquele botão, a descrição da dive mude. foto

1
  • 1
    De mais detalhes senão ela poderá ser fechada, acho que deseja um slider pelas informações que postou,
    – Ricardo
    Commented 14/08/2015 às 20:38

3 Respostas 3

3

Supondo que o id do seu div seja "bla", algo como

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

a forma mais tosca de alterar o conteúdo de forma dinâmica é fazendo algo assim em Javascript:

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

Este é o fundamento do processo. Aí é claro, você vai ter de ligar o código Javascript aos botões de avançar e retornar.

1
  • Hmm... acho que entendi. Vou tentar.
    – mori
    Commented 14/08/2015 às 21:02
1

Estou aprendendo jQuery e essa não é a melhor e mais semântica das soluções mas resolve seu problema se o conteúdo for estático. Adicionei biblioteca jQuery para rodar.

$(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>

0

Pode conseguir este efeito utilizando um plugin de slider, no caso estou usando o bxslider

É necessário antes adicionar certas bibliotecas:

<!-- 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>

E adicionar esta linha ao seu javascript (com o id de seu container das divs claro):

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

Ficará desta forma:

inserir a descrição da imagem aqui

Destacado em preto os seletores de passagem de slider

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .