Gostaria de passar um valor de uma variável contido em javascript através das tabs dentro de um modal para todas as abas. Segue abaixo um exemplo do que eu estou tentando fazer.
$(function () { $(".btn-lg").click(function () {
var td1 = "Teste";
$(".modal-body #id_codigo").val(id_codigo);
td1.innerHTML = id_codigo;
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs nav-justified" style='margin-top: 0px;' >
<li role="presentation" class="active"><a href="#t1" aria-controls="t1" role="tab" data-toggle="tab">Teste1</a></li>
<li role="presentation"><a href="#t2" aria-controls="t2" role="tab" data-toggle="tab">Teste2</a></li>
<li role="presentation"><a href="#t3" aria-controls="t3" role="tab" data-toggle="tab">Teste3</a></li>
<li role="presentation"><a href="#t4" aria-controls="t4" role="tab" data-toggle="tab">Teste4</a></li>
<li role="presentation"><a href="#t5" aria-controls="t5" role="tab" data-toggle="tab">Teste5</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="t1">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_td1"></td>
</tr>
</table>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="t2">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_codigo"></td>
</tr>
</table>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active" id="t3">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_td1"></td>
</tr>
</table>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active" id="t4">
<div class='container-fluid'>
<div class='table-wrapper'>
<div class='table-title'>
</div>
<table class="table table-responsive" border="0">
<tr>
<th>Código:</th>
<td id="id_td1"></td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>