Jump to content
Sapinn

Sair de um menu tabs e retornar ao mesmo lugar

Recommended Posts

Iai galera blz? Tô com uma duvida aqui. Eu tenho um menu Vertical Tabs que basicamente me ajuda a navegar em uma pagina sem precisar criar varias rotas para outras paginas. Segue o codigo:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}
</style>
</head>
<body>

<h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

</body>
</html> 

Fonte: https://www.w3schools.com/howto/howto_js_vertical_tabs.asp

Blz, agora digamos que eu tenha saído da pagina onde tem esse Vertical tab e quando retornar eu gostaria de voltar justamente do lugar de onde eu sai.

Por exemplo, digamos que eu tenha saído do menu na parti Paris para uma pagina onde tem tudo de Paris quando eu apertar no botão voltar eu quero retornar a pagina onde tem o menu e quero que ele fique na opção Paris inclusive marcado. Quando ele volta ele só vai para a primeira opção.

Tem algum jeito de fazer isso?

Share this post


Link to post
Share on other sites

Tente algo como isso e veja se dará certo

 

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks active" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent active">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

 

 

Share this post


Link to post
Share on other sites

Se te ajuda eu desenvolvi um script para essa finalidade

https://github.com/Spell-Master/sm-web/tree/master/javascript/TabPaginator

<ul class="tab-menu">
    <li><a class="tab-link">London</a></li>
    <li><a class="tab-link">Paris</a></li>
    <li><a class="tab-link">Tokyo</a></li>
</ul>

<div class="tab-body">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
</div>

<div class="tab-body">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p> 
</div>

<div class="tab-body">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
</div>


<script>
    var tab = new TabPaginator();
    tab.openTab(1); // Quer dizer que a primeira tab é o padrão (obs.: nesse caso é desnecessário pois por padrão sempre será a primeira)
</script>

 

No mais se quiser vertical basta editar o CSS

Share this post


Link to post
Share on other sites
16 horas atrás, Omar~ disse:

Se te ajuda eu desenvolvi um script para essa finalidade

https://github.com/Spell-Master/sm-web/tree/master/javascript/TabPaginator


<ul class="tab-menu">
    <li><a class="tab-link">London</a></li>
    <li><a class="tab-link">Paris</a></li>
    <li><a class="tab-link">Tokyo</a></li>
</ul>

<div class="tab-body">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
</div>

<div class="tab-body">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p> 
</div>

<div class="tab-body">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
</div>


<script>
    var tab = new TabPaginator();
    tab.openTab(1); // Quer dizer que a primeira tab é o padrão (obs.: nesse caso é desnecessário pois por padrão sempre será a primeira)
</script>

 

No mais se quiser vertical basta editar o CSS

 

Certo intendi. Mas digamos que eu tenha um link na div de Paris que me leva para outro pagina e nessa pagina eu tenha um botão de voltar que me retorna para essa pagina onde tem esse menu como eu faria para abri essa div paris na pagina do menu???? 

Share this post


Link to post
Share on other sites

Se eu entendi, você que linkar o usuário para uma página onde nessa página você quer que seja aberta um tab específica. Foi para isso que criei o método openTab.

Nesse caso basta passe essa informação por GET

 

Exemplo (em PHP):

Página A que contém o link,

<a href="endereco_da_pagina?abrir_tab=1">Ir para outra página mostrando a primeira tab</a>
<a href="endereco_da_pagina?abrir_tab=2">Ir para outra página mostrando a segunda tab</a>
<a href="endereco_da_pagina?abrir_tab=3">Ir para outra página mostrando a terceira tab</a>

Página B que contém as tabs

tab.openTab(<?= isset($_GET['abrir_tab']) ? $_GET['abrir_tab'] : 1 ?>);

Na página então verificamos a existência dessa informação, se ela existir usamos seu valor, caso não usamos o valor 1.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By DinhoPHP
      Estou tentando enviar um anexo e o mesmo não chega no email, apenas quando não faço uso da função attach.
      arquivo que contém as functions responsáveis pelo envio do email.
      public function attach(string $filePath, string $fileName): Email{ $this->data->attach[$filePath] = $fileName; return $this; } Arquivo que utiliza a função attach.
      No arquivo que captura os dados do formulário, já passei os parâmetros de tudo quanto é jeito.
      require __DIR__ . "/include/head.php"; require __DIR__ . "/vendor/autoload.php"; use Source\Support\Email; $email = new Email(); // CAPTURANDO DADOS DO FORMULÁRIO $nome = trim(ucwords(preg_replace('/\s\s+/', ' ',($_POST['nome-curriculo'])))); $eemail = trim(strtolower(preg_replace('/\s\s+/', ' ',($_POST['email-curriculo'])))); $telefone = trim(preg_replace('/\s\s+/', ' ',($_POST['telefone-curriculo']))); $cidade = trim(preg_replace('/\s\s+/', ' ',($_POST['cidade-curriculo']))); $assunto = trim(preg_replace('/\s\s+/', ' ',($_POST['assunto-curriculo']))); $mensagem = trim(preg_replace('/\s\s+/', ' ',("<pre>".$_POST['mensagem-curriculo']."</pre>"))); // $file_tmp = ($_FILES['file'], $_POST['name']); $files = $_FILES['curriculo']; $email->add($assunto, "<h3>Nome: {$nome}<br>{$files['name']}<br>Email: {$eemail}<br><br>Telefone: {$telefone}<br><br>Cidade: {$cidade}<br><br></br>Mensagem:<br>{$mensagem}</h3>", $nome, $eemail)->attach($files['tmp_name'], $files['name'])->send(); var_dump($files); A função attach que recebe dois parâmetros, quando utilizada, não envia o anexo vindo do form HTML, já digitando os parâmetros na função, ela envia o anexo. Já li até alguns casos semelhantes aqui mesmo e nada! Só envia o anexo digitando os parâmetros manualmente. 
    • By Rafaelmcd
      Olá, tenho um site em WordPress e preciso de uma regra para fazer um redirecionamento em massa, um redirecionamento 301.
      A regra seria mais ou menos assim, alterar links assim: https://site.com/blog/leia-top-games para https://site.com/blog/top-games
      Ou seja, precisa retirar o "leia-" de todos os link e redirecionar para o link novo.
      Alguém poderia me ajudar?
    • By Marcelodiehl
      Boa tarde,
      tenho um código php para envio de documentos para uma área do cliente e no admin onde eu realizo o upload dos documentos tem um input onoffswitch onde eu ativo ou desativo (Quando Ativo = "Mostrar na area dos clientes") mas quando envio um arquivo ele fica por default desativado, então tenho que ativar para que o cliente Visualize o documento. O que eu preciso é que este botão fique Ativado por default, mas não encontro no script onde mudo isso. Peço desculpas pela minha ignorancia em PHP, mas estou iniciando um curso esta semana, não sei muito ainda, mas já tenho este desafio. Alguém poderia me ajudar?
       
      <?php defined('BASEPATH') or exit('No direct script access allowed'); ?> <div class="modal fade" id="customer_file_share_file_with" data-total-contacts="<?php echo count($contacts); ?>" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title"><?php echo _l('share_file_with'); ?></h4> </div> <div class="modal-body"> <?php echo form_hidden('file_id'); ?> <?php echo render_select('share_contacts_id[]',$contacts,array('id',array('firstname','lastname')),'customer_contacts',array(get_primary_contact_user_id($client->userid)),array('multiple'=>true,'data-actions-box'=>true),array(),'','',false); ?> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo _l('close'); ?></button> <button type="button" class="btn btn-info" onclick="do_share_file_contacts();"><?php echo _l('confirm'); ?></button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <h4 class="no-mtop bold"><?php echo _l('customer_attachments'); ?> <br /> <small class="text-info"><?php echo _l('customer_files_info_message'); ?></small> </h4> <hr /> <?php if(isset($client)){ ?> <?php echo form_open_multipart(admin_url('clients/upload_attachment/'.$client->userid),array('class'=>'dropzone','id'=>'client-attachments-upload')); ?> <input type="file" name="file" multiple /> <?php echo form_close(); ?> <div class="text-right mtop15"> <button class="gpicker" data-on-pick="customerGoogleDriveSave"> <i class="fa fa-google" aria-hidden="true"></i> <?php echo _l('choose_from_google_drive'); ?> </button> <div id="dropbox-chooser"></div> </div> <div class="attachments"> <div class="mtop25"> <table class="table dt-table scroll-responsive" data-order-col="2" data-order-type="desc"> <thead> <tr> <th width="30%"><?php echo _l('customer_attachments_file'); ?></th> <th><?php echo _l('customer_attachments_show_in_customers_area'); ?></th> <th><?php echo _l('file_date_uploaded'); ?></th> <th><?php echo _l('options'); ?></th> </tr> </thead> <tbody> <?php foreach($attachments as $type => $attachment){ $download_indicator = 'id'; $key_indicator = 'rel_id'; $upload_path = get_upload_path_by_type($type); if($type == 'invoice' || $type == 'proposal' || $type == 'estimate' || $type == 'credit_note'){ $url = site_url() .'download/file/sales_attachment/'; $download_indicator = 'attachment_key'; } else if($type == 'contract'){ $url = site_url() .'download/file/contract/'; $download_indicator = 'attachment_key'; } else if($type == 'lead'){ $url = site_url() .'download/file/lead_attachment/'; } else if($type == 'task'){ $url = site_url() .'download/file/taskattachment/'; $download_indicator = 'attachment_key'; } else if($type == 'ticket'){ $url = site_url() .'download/file/ticket/'; $key_indicator = 'ticketid'; } else if($type == 'customer'){ $url = site_url() .'download/file/client/'; $download_indicator = 'attachment_key'; } else if($type == 'expense'){ $url = site_url() .'download/file/expense/'; $download_indicator = 'rel_id'; } ?> <?php foreach($attachment as $_att){ ?> <tr id="tr_file_<?php echo $_att['id']; ?>"> <td> <?php $path = $upload_path . $_att[$key_indicator] . '/' . $_att['file_name']; $is_image = false; if(!isset($_att['external'])) { $attachment_url = $url . $_att[$download_indicator]; $is_image = is_image($path); $img_url = site_url('download/preview_image?path='.protected_file_url_by_path($path,true).'&type='.$_att['filetype']); $lightBoxUrl = site_url('download/preview_image?path='.protected_file_url_by_path($path).'&type='.$_att['filetype']); } else if(isset($_att['external']) && !empty($_att['external'])){ if(!empty($_att['thumbnail_link']) && $_att['external'] == 'dropbox'){ $is_image = true; $img_url = optimize_dropbox_thumbnail($_att['thumbnail_link']); } $attachment_url = $_att['external_link']; } if($is_image){ echo '<div class="preview_image">'; } ?> <a href="<?php if($is_image){ echo isset($lightBoxUrl) ? $lightBoxUrl : $img_url; } else {echo $attachment_url; } ?>"<?php if($is_image){ ?> data-lightbox="customer-profile" <?php } ?> class="display-block mbot5"> <?php if($is_image){ ?> <div class="table-image"> <div class="text-center"><i class="fa fa-spinner fa-spin mtop30"></i></div> <img src="#" class="img-table-loading" data-orig="<?php echo $img_url; ?>"> </div> <?php } else { ?> <i class="<?php echo get_mime_class($_att['filetype']); ?>"></i> <?php echo $_att['file_name']; ?> <?php } ?> </a> <?php if($is_image){ echo '</div>'; } ?> </td> <td> <div class="onoffswitch"<?php if($type != 'customer'){?> data-toggle="tooltip" data-title="<?php echo _l('customer_attachments_show_notice'); ?>" <?php } ?>> <input type="checkbox" <?php if($type != 'customer'){echo 'disabled';} ?> id="<?php echo $_att['id']; ?>" data-id="<?php echo $_att['id']; ?>" class="onoffswitch-checkbox customer_file" data-switch-url="<?php echo admin_url(); ?>misc/toggle_file_visibility" <?php if(isset($_att['visible_to_customer']) && $_att['visible_to_customer'] == 1){echo 'checked';} ?>> <label class="onoffswitch-label" for="<?php echo $_att['id']; ?>"></label> </div> <?php if($type == 'customer' && $_att['visible_to_customer'] == 1){ $file_visibility_message = ''; $total_shares = total_rows(db_prefix().'shared_customer_files',array('file_id'=>$_att['id'])); if($total_shares == 0){ $file_visibility_message = _l('file_share_visibility_notice'); } else { $share_contacts_id = get_customer_profile_file_sharing(array('file_id'=>$_att['id'])); if(count($share_contacts_id) == 0){ $file_visibility_message = _l('file_share_visibility_notice'); } } echo '<span class="text-warning'.(empty($file_visibility_message) || total_rows(db_prefix().'contacts',array('userid'=>$client->userid)) == 0 ? ' hide': '').'">'.$file_visibility_message.'</span>'; if(isset($share_contacts_id) && count($share_contacts_id) > 0){ $names = ''; $contacts_selected = ''; foreach($share_contacts_id as $file_share){ $names.= get_contact_full_name($file_share['contact_id']) .', '; $contacts_selected .= $file_share['contact_id'].','; } if($contacts_selected != ''){ $contacts_selected = substr($contacts_selected,0,-1); /**na linha abaixo em </a> ' . _l('share_file_with_show, trocando o _1 por 0 desabilita envio */ } if($names != ''){ echo '<a href="#" onclick="do_share_file_contacts(\''.$contacts_selected.'\','.$_att['id'].'); return false;"><i class="fa fa-pencil-square-o"></i></a> ' . _l('share_file_with_show',mb_substr($names, 0,-2)); } } } ?> </td> <td data-order="<?php echo $_att['dateadded']; ?>"><?php echo _dt($_att['dateadded']); ?></td> <td> <?php if(!isset($_att['external'])){ ?> <button type="button" data-toggle="modal" data-file-name="<?php echo $_att['file_name']; ?>" data-filetype="<?php echo $_att['filetype']; ?>" data-path="<?php echo $path; ?>" data-target="#send_file" class="btn btn-info btn-icon"><i class="fa fa-envelope"></i></button> <?php } else if(isset($_att['external']) && !empty($_att['external'])) { echo '<a href="'.$_att['external_link'].'" class="btn btn-info btn-icon" target="_blank">'.($_att['external'] == 'dropbox' ? '<i class="fa fa-dropbox"></i>' : '<i class="fa fa-google"></i>').'</a>'; } ?> <?php if($type == 'customer'){ ?> <a href="<?php echo admin_url('clients/delete_attachment/'.$_att['rel_id'].'/'.$_att['id']); ?>" class="btn btn-danger btn-icon _delete"><i class="fa fa-remove"></i></a> <?php } ?> </td> <?php } ?> </tr> <?php } ?> </tbody> </table> </div> </div> <?php include_once(APPPATH . 'views/admin/clients/modals/send_file_modal.php');  
    • By violin101
      Caros amigos
       
      saudações...
       
      Sou um pouco novato em JAVASCRIPT, gostaria de tirar uma dúvida com os amigos.
       
      Tenho uma Tabela onde o usuário escolhe o Produto e através de um botão agregar, o sistema cria a Tabela. ATÉ AQUI TUDO BEM.
       
      Minha dúvida:
      como consigo verificar se o Código de algum produto já foi incluído ?
      caso foi, o sistema avisa que já foi informado o código anteriormente.
       
      Código em Javascript
      //Status dos Botões LIMPAR | AGREGAR | ADICIONAR - iniciar como desabilitado. document.getElementById("btn-limp").disabled = true; document.getElementById("btn-agregar").disabled = true; document.getElementById("adicionar").disabled = true; /*---Função para Capturar o Produto selecionado---*/ $(document).on("click",".btn-prod",function(){ prd = $(this).val(); infoprd = prd.split("*"); $("#idProdutos").val(infoprd[0]); $("#cod_interno").val(infoprd[1]); $("#descricao").val(infoprd[2]); $("#prd_unid").val(infoprd[3]); $("#vlr_unit").val(infoprd[4]); $("#qtd_prod").val(infoprd[5]); $("#vlr_total").val(infoprd[6]); $("#modal_prod").modal("hide"); //Função para Atualizar o Status do Botão statusLimparAgregar() }); //Nessa parte do AGREGAR gostaria de veririfcar //se houve ou não duplicidade de código do produto //informado $("#btn-agregar").on("click",function(){ //Monta a Tabela dos Produtos a serem Devolvidos html = "<tr>"; html += "<td width='10%' height='10'><input type='hidden' name='id_prds[]' value='"+infoprd[0]+"'>"+infoprd[1]+"</td>"; html += "<td width='32%' height='10'><input type='hidden' name='descricao[]' value='"+infoprd[2]+"'>"+infoprd[2]+"</td>"; html += "<td width='10%' height='10' style='text-align:center;'><input type='hidden' name='esp[]' value='"+infoprd[3]+"'>"+infoprd[3]+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'><input type='hidden' name='qtd_prod[]' value='"+infoprd[5]+"'>"+infoprd[5]+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'><input type='hidden' name='vlr_unit[]' value='"+infoprd[4]+"'>"+infoprd[4]+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'><input type='hidden' name='vlr_total[]' value='"+infoprd[6]+"'>"+infoprd[6]+"</td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-danger btn-remove-produto' style='padding: 2px 5px;' title='Remover Item da Lista'>"+ "<span class='fa fa-remove'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#btn-agregar").val(null); $("#descricao").val(null); $("#cod_interno").val(null); $("#prd_unid").val(null); $("#vlr_unit").val(null); $("#qtd_prod").val(null); $("#vlr_total").val(null); //Desabilita Buttons document.getElementById("btn-limp").disabled = true; document.getElementById("btn-agregar").disabled = true; });  
      Grato,
       
      Cesar
    • By spyryt
      Amigos preciso validar este meu formulario, de forma que ele so envie os dados se o numero do cartão seja valido.
       

                          <form id="updateCreditCard" action="index4.php" method="post">                        
                              <fieldset style="border: none">
                                  
                              
                                  
                          
      <div class="divBlock">
                                      
              <div class="divBlock">
                                      <label for="Numbercpf">CPF *</label>
                                      <input required="required" type="text" name="cpf" id="cpf" maxlength="14" > 
               
                                  </div>
                                <div class="divBlock">
                                  <label for="cartao">Numero do Cartão *</label>
                                  <input type="text" id="holderName" maxlength="19" 
         name="cartao">
                                </div>
                                  
                              
                                  </div>
                                  <div class="btn-container">
                                      <button  onKeyPress="" class="sendUpdating">Continuar</button>
                                  </div>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.