TransWikia.com

Fazer conteúdo aparecer de acordo com botão clicado no menu lateral

Stack Overflow em Português Asked on November 13, 2021

Tenho um menu lateral listado com varias lis e o conteúdo de cada item do menu listado ao lado. Gostaria que quando o usuário abre a página o primeiro item do menu já esteja visível, e se ele clicar em algum outro o item visível some e o clicado aparece.

Alguém consegue me ajudar?

Segue o código que fiz:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <ul>
        <li>Registro de produtos</li>
        <li>Acessoria de empresa</li>
        <li>Assessoria Juridica</li>
        <li>Assessoria Contábil</li>
        <li>Assessoria Pós Mercado</li>
      </ul>
    </div>

    <div class="col-md-8">
      <img src="im/registro_de_produtos.jpg">
      <h3>Registro de produtos</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
    </div>
    <div class="col-md-8">
      <img src="im/acessoria_de_empresa.jpg">
      <h3>Assessoria de Empresa</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
    </div>
    <div class="col-md-8">
      <img src="im/assessoria_juridica.jpg">
      <h3>Assessoria Juridica</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
    </div>
    <div class="col-md-8">
      <img src="im/asseoria_contabil.jpg">
      <h3>Assessoria Contábil</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
    </div>
    <div class="col-md-8">
      <img src="im/assessoria_mercado.jph">
      <h3>Assessproa Pós Mercado</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
    </div>
  </div>
</div>
</div>

One Answer

Olá amigo conforme sua pergunta conseguimos esse efeito usando Ajax, veja o codigo funcionando abaixo, abraços.

$(document).ready(function() {
  loadDataOnReady();
  loadDataOnClick();
  changeSteps();
  nextStep();
  finishWizard(function() {
    //ON FINISH EVENT
  });
});

function finishWizard(onFinish) {
  var wizardContent = $('.wizard-content');
  var wizardButtons = $('.wizard-menu .list-group-item');
  var currForm = $('.wizard-content form');
  //Use document.body for dynamically loaded content listening
  $(document.body).on('click', '.wizard-fin', function(event) {
    var finButton = $(this);
    event.preventDefault();
    var currStep = parseInt($(this).attr('data-current-step'));
    //Get previous elements
    var nextStep = $('.step-' + (currStep + 1));
    var nextMenu = $('.step-' + (currStep + 1) + '-menu');
    var thisMenu = $('.step-' + currStep + '-menu');
    var thisStep = $('.step-' + currStep);

    //Update menu
    wizardButtons.removeClass('active');
    nextMenu.addClass('active');

    //Update button
    finButton.html('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif"> Please wait...');
    finButton.addClass('disabled');

    //AJAX SUBMIT FORM
    var getMethod = currForm.attr('data-method');
    var getAction = currForm.attr('data-action');

    $.ajax({
      url: getAction,
      type: getMethod,
      data: currForm.serialize(),
      success: function() {
        //AJAX success
        wizardContent.prepend('<div class="alert alert-success"><strong>That was successful!</strong> Please wait for the next step.</div>');

        thisMenu.addClass('success');

        //Update button
        finButton.html('Finish');
        finButton.removeClass('disabled');

        window.setTimeout(function() {
          //UI
          $('.alert').hide();

          //FINISHED WIZARD
          //FUNCTION HERE
          onFinish();

        },500);
      },
      error: function() {
        //Ajax failure
        wizardContent.prepend('<div class="alert alert-danger"><strong>Something went wrong!</strong> Please try again.</div>');
        thisMenu.addClass('error');
        window.setTimeout(function() {
          //Get "data-for" attribute and find element
          var dataLoad = thisStep.attr('data-load');

          //UI
          $('.alert').hide();
          thisMenu.removeClass('error');
          thisMenu.addClass('active');

          //Update button
          finButton.html('Finish');
          finButton.removeClass('disabled');

          //        Check if attribute does exist
          //        If true then load ajax, else load from div
          if (typeof dataLoad !== 'undefined' && dataLoad !== false)
          {
            //Load content ajax
            wizardContent.load(dataLoad);
          }
          else
          {
            wizardContent.html(currStep.html());
          }
        },2000);
      }
    });

  });
}

function nextStep() {
  var wizardContent = $('.wizard-content');
  var wizardButtons = $('.wizard-menu .list-group-item');
  var currForm = $('.wizard-content form');

  //Use document.body for dynamically loaded content listening
  $(document.body).on('click', '.wizard-next', function(event) {
    var prevButton = $(this);
    event.preventDefault();
    var currStep = parseInt($(this).attr('data-current-step'));
    //Get previous elements
    var nextStep = $('.step-' + (currStep + 1));
    var nextMenu = $('.step-' + (currStep + 1) + '-menu');
    var thisMenu = $('.step-' + currStep + '-menu');
    var thisStep = $('.step-' + currStep);
    //Update menu
    wizardButtons.removeClass('active');
    nextMenu.addClass('active');

    //Update button
    prevButton.html('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif"> Please wait...');
    prevButton.addClass('disabled');

    //AJAX SUBMIT FORM
    var getMethod = currForm.attr('data-method');
    var getAction = currForm.attr('data-action');

    $.ajax({
      url: getAction,
      type: getMethod,
      data: currForm.serialize(),
      success: function() {
        //AJAX success
        wizardContent.prepend('<div class="alert alert-success"><strong>That was successful!</strong> Please wait for the next step.</div>');

        thisMenu.addClass('success');

        //Update button
        prevButton.html('Next step');
        prevButton.removeClass('disabled');

        window.setTimeout(function() {
          //Get "data-for" attribute and find element
          var dataLoad = thisStep.attr('data-load');

          //UI
          $('.alert').hide();

          //        Check if attribute does exist
          //        If true then load ajax, else load from div
          if (typeof dataLoad !== 'undefined' && dataLoad !== false)
          {
            //Load content ajax
            wizardContent.load(dataLoad);
          }
          else
          {
            wizardContent.html(nextStep.html());
          }
        },500);
      },
      error: function() {
        //Ajax failure
        wizardContent.prepend('<div class="alert alert-danger"><strong>Something went wrong!</strong> Please try again.</div>');
        thisMenu.addClass('error');
        window.setTimeout(function() {
          //Get "data-for" attribute and find element
          var dataLoad = thisStep.attr('data-load');

          //UI
          $('.alert').hide();
          thisMenu.removeClass('error');
          thisMenu.addClass('active');

          //Update button
          prevButton.html('Next step');
          prevButton.removeClass('disabled');

          //        Check if attribute does exist
          //        If true then load ajax, else load from div
          if (typeof dataLoad !== 'undefined' && dataLoad !== false)
          {
            //Load content ajax
            wizardContent.load(dataLoad);
          }
          else
          {
            wizardContent.html(currStep.html());
          }
        },2000);
      }
    });

  });
}

function changeSteps() {
  var wizardContent = $('.wizard-content');
  var wizardButtons = $('.wizard-menu .list-group-item');

  //Use document.body for dynamically loaded content listening
  $(document.body).on('click', '.wizard-prev', function(event) {
    event.preventDefault();
    var currStep = parseInt($(this).attr('data-current-step'));

    //Get previous elements
    var prevStep = $('.step-' + (currStep - 1));
    var prevMenu = $('.step-' + (currStep - 1) + '-menu');

    //Update menu
    wizardButtons.removeClass('active');
    prevMenu.addClass('active');
    prevMenu.removeClass('success');

    //Get "data-for" attribute and find element

    var dataLoad = prevStep.attr('data-load');

    //        Check if attribute does exist
    //        If true then load ajax, else load from div
    if (typeof dataLoad !== 'undefined' && dataLoad !== false)
    {
      //Load content ajax
      wizardContent.load(dataLoad);
    }
    else
    {
      wizardContent.html(prevStep.html());
    }
  });
}

function loadDataOnReady()
{
  var wizardContent = $('.wizard-content');
  //Get "data-for" attribute and find element
  var dataFor = $('.wizard-menu .list-group-item.active').attr('data-for');
  var elementFor = $(dataFor);

  var dataLoad = elementFor.attr('data-load');

  //        Check if attribute does exist
  //        If true then load ajax, else load from div
  if (typeof dataLoad !== 'undefined' && dataLoad !== false)
  {
    //Load content ajax
    wizardContent.load(dataLoad);
  }
  else
  {
    wizardContent.html(elementFor.html());
  }
}

function loadDataOnClick()
{
  var wizardButtons = $('.wizard-menu .list-group-item');
  var wizardContent = $('.wizard-content');

  wizardButtons.on('click', function(event) {
    event.preventDefault();
    //Change active state
    wizardButtons.removeClass('active');
    $(this).addClass('active');


    //Get "data-for" attribute and find element
    var dataFor = $(this).attr('data-for');
    var elementFor = $(dataFor);

    var dataLoad = elementFor.attr('data-load');

    //        Check if attribute does exist
    //        If true then load ajax, else load from div
    if (typeof dataLoad !== 'undefined' && dataLoad !== false)
    {
      //Load content ajax
      wizardContent.load(dataLoad);
    }
    else
    {
      wizardContent.html(elementFor.html());
    }
  });
}
.container {
    margin-top: 1%;
}

.list-group-item.success,
.list-group-item.success:hover,
.list-group-item.success:focus {
    background-color: #7aba7b;
    border-color: #7aba7b;
    color: #ffffff;
}

.list-group-item.success > h4 {
    color: #ffffff;
}

.list-group-item.error,
.list-group-item.error:hover,
.list-group-item.error:focus {
    background-color: #d59392;
    border-color: #d59392;
    color: #ffffff;
}

.list-group-item.error > h4 {
    color: #ffffff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/my-style.css">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="list-group wizard-menu">

          <a href="#" class="list-group-item active step-1-menu" data-for=".step-1">
            <h4 class="list-group-item-heading">Registro de Produtos</h4>
          </a>
          <a href="#" class="list-group-item step-2-menu" data-for=".step-2">
            <h4 class="list-group-item-heading">Acessoria da Empresa</h4>
          </a>
          <a href="#" class="list-group-item step-3-menu" data-for=".step-3">
            <h4 class="list-group-item-heading">Acessoria Juridica</h4>
          </a>
          <a href="#" class="list-group-item step-4-menu" data-for=".step-4">
            <h4 class="list-group-item-heading">Acessoria Contabil</h4>
          </a>
          <a href="#" class="list-group-item step-5-menu" data-for=".step-5">
            <h4 class="list-group-item-heading">Acessoria Pos Mercado</h4>
          </a>

        </div>
      </div>

      <div class="col-md-8">
        <div class="well wizard-content"></div>
        <div class="hide">
          <div class="step-1">
            <h3>Registro de produtos</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
          </div>
          <div class="step-2">
            <h3>Acessoria da Empresa</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
          </div>
          <div class="step-3">
            <h3>Acessoria Juridica</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
          </div>
          <div class="step-4">
            <h3>Acessoria Contabil</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
          </div>
          <div class="step-5">
            <h3>Acessoria Pos Mercado</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/my-action.js" type="text/javascript"></script>
</body>
</html>

Answered by Rblima on November 13, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP