Publicado em 11 de mai.

Bootstrap tabs com php

Olá galera!

Preciso de criar com PHP e Bootstrap umas Tabs mas cujo conteúdo venha do BD.

Queria que numa determinada condição fossem inseridas funções mas não estou a conseguir. Os dados das função aparecem sempre, fora das Tabs e não de acordo com as tabs selecionadas.

Alguém pode ajudar?

$var = $_GET['p'];
$tab_query = "SELECT * FROM tab1 INNER JOIN tab2 WHERE tab2.tab1id=tab1.tab1id AND idtab = $var ORDER BY tab1.tab1id ASC";

$tab_result = mysqli_query($con, $tab_query)

or die("Error: ".mysqli_error($con));
$tab_menu = '';
$tab_content = '';
$i = 0;

while($row = mysqli_fetch_array($tab_result)) {

 if($i == 0)
 {
 $tab_menu .= '
 <li class="active"><a href="#'.$row["tab1id"].'" data-toggle="tab">'.$row["tab1"].'</a></li>
 ';
 $tab_content .= '
 <div id="'.$row["tab1id"].'" class="tab-pane fade in active">
 ';
 }
 else
 {
 $tab_menu .= '
 <li><a href="#'.$row["tab1id"].'" data-toggle="tab">'.$row["tab1"].'</a></li>
 ';
 $tab_content .= '<div id="'.$row["tab1id"].'" class="tab-pane fade">';
 }

 $tab3_query = "SELECT * FROM tab2 WHERE tab1id = '".$row["tab1id"]."' ";
 $tab3_result = mysqli_query($con, $tab3_query);
 while($sub_row = mysqli_fetch_array($tab3_result))
$cat=$row["tab1id"];

 {
 if ($cat==1){
 $tab_content .= '<div class="col-md-12" style="margin-bottom:36px;">'.funcao1().'</div>';
 } else if ($cat==2)
 {
 $tab_content .= '<div class="col-md-12" style="margin-bottom:36px;">'.funcao2().'</div>';
 } else if ($cat==3)
 {
	$tab_content .='<div class="col-md-12" style="margin-bottom:36px;">'.funcao3().'</div>';
 }

 }

 $tab_content .= '<div style="clear:both"></div></div>';
 $i++;
}

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

gabrieldarezzo· 11 de mai.

Vamos por partes.

Você já domina o conceito de Tabs do Bootstrap?

http://getbootstrap.com/components/#nav-tabs

Basicamente você precisa de um elemento cujo a 'data-toggle' seja tab:

data-toggle="tab"

E o 'href' desse cara é quem você aponta (usando um # antes)

Exemplo completo:

<ul class="nav nav-tabs">
	<li class="nav active"><a href="#A" data-toggle="tab">A</a></li>
	<li class="nav"><a href="#B" data-toggle="tab">B</a></li>
	<li class="nav"><a href="#C" data-toggle="tab">C</a></li>
</ul>

	 

	Agora só criar os 'tab-content' que possuem um id:

<div class="tab-content">
	<div class="tab-pane fade in active" id="A">Content inside tab A</div>
	<div class="tab-pane fade" id="B">Content inside tab B</div>
	<div class="tab-pane fade" id="C">Content inside tab C</div>
</div>

	 

	Obviamente não podemos esquecer de de importar o CSS (de preferencia no HEAD), muito menos O JS (que faz tudo funcionar):

<!DOCTYPE HTML>

<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>
<body>
 ...

 <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</body>
</html>

	 

	Exemplo completo:

	[https://jsfiddle.net/dajyc658/](https://jsfiddle.net/dajyc658/)

	 

	Após criar isso 'estaticamente esquecendo do PHP' e funcionar você pensa em PHP.

	 

	 

	Obviamente pode ser um erro de JavaScript tambem.

	nesse caso você precisa abrir o Console do seu browser:

	 

	Mozilla:

	Ctrl + Shift + K

	 

	Google Chrome:

	Ctrl + Shif + J

	 

	Veja se tem algum erro.

	....

	 

	Após isso você tenta gerar dinamicamente os campos que gera estaticamente.

xtroino· 11 de mai.

gabrieldarezzo agradeço a resposta.

Não coloquei o código todo.

Acontece que em html tudo funciona bem. Aqui o código todo:

$var = $_GET['p'];
$tab_query = "SELECT * FROM tab1 INNER JOIN tab2 WHERE tab2.tab1id=tab1.tab1id AND idtab = $var ORDER BY tab1.tab1id ASC";

$tab_result = mysqli_query($con, $tab_query)

or die("Error: ".mysqli_error($con));
$tab_menu = '';
$tab_content = '';
$i = 0;

while($row = mysqli_fetch_array($tab_result)) {

 if($i == 0)
 {
 $tab_menu .= '
 <li class="active"><a href="#'.$row["tab1id"].'" data-toggle="tab">'.$row["tab1"].'</a></li>
 ';
 $tab_content .= '
 <div id="'.$row["tab1id"].'" class="tab-pane fade in active">
 ';
 }
 else
 {
 $tab_menu .= '
 <li><a href="#'.$row["tab1id"].'" data-toggle="tab">'.$row["tab1"].'</a></li>
 ';
 $tab_content .= '<div id="'.$row["tab1id"].'" class="tab-pane fade">';
 }

 $tab3_query = "SELECT * FROM tab2 WHERE tab1id = '".$row["tab1id"]."' ";
 $tab3_result = mysqli_query($con, $tab3_query);
 while($sub_row = mysqli_fetch_array($tab3_result))
$cat=$row["tab1id"];

 {
 if ($cat==1){
 $tab_content .= '<div class="col-md-12" style="margin-bottom:36px;">teste 1</div>';
 } else if ($cat==2)
 {
 $tab_content .= '<div class="col-md-12" style="margin-bottom:36px;">teste 2</div>';
 } else if ($cat==3)
 {
	$tab_content .='<div class="col-md-12" style="margin-bottom:36px;">teste 3</div>';
 }
}

 $tab_content .= '<div style="clear:both"></div></div>';
 $i++;
}
 ...

 <!-- Bootstrap Core CSS -->
 <link href="css/bootstrap.min.css" rel="stylesheet">

 <!-- Custom CSS -->
 <link href="css/modern-business.css" rel="stylesheet">

 <!-- Custom Fonts -->
 <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
...

 <div class="row">
 <div class="col-lg-12">
 <br />
 <ul class="nav nav-tabs">
 <?php
 echo $tab_menu;
 ?>
 </ul>
 <div class="tab-content">
 <br />
 <?php
 echo $tab_content;
 ?>
 </div>
 </div>
 </div>

	Eu apenas quero substituir onde está teste 1 por uma função php, teste 2 por outra funcao, etc. Não sei se é possível

	Obrigado pela ajuda.

xtroino· 12 de mai.

Alguém tem uma sugestão? Obrigado.