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>

html javascript jquery menu

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!

Recent Answers

Jon Church on Why fry rice before boiling?
haakon.io on Why fry rice before boiling?
Lex on Does Google Analytics track 404 page responses as valid page views?
Joshua Engel on Why fry rice before boiling?
Peter Machado on Why fry rice before boiling?

Recent Questions

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