Open a certain tab by clicking the navbar link

Navigation
2

I have a navbar that has several links to the same page that has 3 tabs. I need to click on a navbar item it opens the page with the specific tab selected.

Itriedtodothis(butitdidnotwork):

$("#menu").click(function(){
			$("#dados-capa").removeClass("active");
			$("#itens").addClass("active");
		})

PS. The system is in laravel, the tabs link is in this format: / data-layer

    
asked by anonymous 31.10.2017 / 17:37

2 answers

2

Recreating the same situation: 

$(document).on('click','.navbar-nav li a',function(){
  var tab = $(this).data('tab');
  $('.'+tab).trigger('click');
  console.log(tab);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Tabs</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a class="active"  data-tab="tab1" href="#">Tab 1</a></li>
      <li><a href="#" data-tab="tab2">Tab 2</a></li>
      <li><a href="#" data-tab="tab3">Tab 3</a></li>
    </ul>
  </div>
</nav>
</div>
<div class="col-md-12">
<ul class="nav nav-tabs">
  <li class="active tab1"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
  <li><a data-toggle="tab" href="#tab2" class="tab2">Tab 2 1</a></li>
  <li><a data-toggle="tab" href="#tab3" class="tab3">Tab 3 2</a></li>
</ul>
   <div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    tab 1
  </div>
  <div id="tab2" class="tab-pane fade">
    tab 2
  </div>
  <div id="tab3" class="tab-pane fade">
    tab 3
  </div>
</div>
</div>
</div>

See that a data-attr has been added with the tab to navbar containing which tabs must be clicked, after capturing the value, trigera click in browser tab with classname in question.

NOTE: console.log() is left for you to see the tab indicated in the example, it is not necessary in the final product.

    
31.10.2017 / 18:02
-1

If you are using jQuery Tabs: 

$( "#tabs" ).tabs({ active: #seutab });
    
31.10.2017 / 17:41
How to perform an arithmetic operation by changing numerous fields in the database efficiently? Is there a naming pattern for table index names in Mysql?