Change page content without having to go elsewhere

Navigation
1

I want the product page of my site to see if you have how to click on a particular category of products, and just change the quantity of the products on the page, without going on another page. I wanted to do this so I did not have to create many pages. In the case of the code below, I wanted for example when I clicked on Basic T-shirt it appears only such a shirt model, and so on in the other two categories. If anyone can help I'm grateful !!! 

<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<?php
	session_start();
	require "banco.php";
	if (isset($_SESSION['user_id'])) {
		$records = $con->prepare("SELECT id,nome,email,senha FROM usuario WHERE id = :id");
		$records->bindParam(':id',$_SESSION['user_id']);
		$records->execute();
		$results = $records->fetch(PDO::FETCH_ASSOC);
		$user = NULL;
		if (count($results) > 0) {
			$user = $results;
		}
	}


 ?>
 
 

<!DOCTYPE html>
<html>
<head>
<title>New Store A Ecommerce Category Flat Bootstarp Resposive Website Template | Products :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'><!--//fonts-->
<!-- start menu -->
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>
<script src="js/simpleCart.min.js"> </script>

<style>

.content{
     margin: 10px;
	text-align: center;
    }
.botao01{
     background: -webkit-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
     background: -moz-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
     background: -o-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
     background: -ms-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
     background: linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
     border: 1px solid #CCCCCE;
     border-radius: 3px;
     box-shadow: 0 3px 0 rgba(0, 0, 0, .3),
                   0 2px 7px rgba(0, 0, 0, 0.2);
     color: #FF4500;
     display: inline;
     font-family: "Trebuchet MS";
     font-size: 14px;
     font-weight: bold;
     line-height: 25px;
     text-align: center;
     text-decoration: none;
     text-transform: uppercase;
     text-shadow:1px 1px 0 #FFF;
     padding: 5px 15px;
     position: relative;
     width: 80px;
}
 
.botao01:before{
     border: 1px solid #FFF;
     border-radius: 3px;
     box-shadow: inset 0 -2px 12px -4px rgba(70, 70, 70, .2),
                   inset 0 3px 2px -1px rgba(255, 255, 255, 1);
     content: "";
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
     padding: 5px;
     position: absolute;
    }
 
    .botao01:after{
     background: rgba(255, 255, 255, .4);
     border-radius: 2px;
     content: "";
     bottom: 15px;
     left: 0px;
     right: 0px;
     top: 0px;
     position: absolute;
    }
 .botao01:active{
     box-shadow: inset 0 0 7px rgba(0, 0, 0, .2);
     top: 4px;
    }
    .botao01:active:before{
     border: none;
     box-shadow:none;
    }

</style>



</head>
<body>
<!--header-->
<div class="header">
	<div class="header-top">
		<div class="container">
			<div class="search">
					<form>
						<input type="text" value="Search " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}">
						<input type="submit" value="Go">
					</form>
			</div>
			<div class="header-left">
				<ul style="margin-right: 50px;">
						<?php if($user > 0): ?>
							<li style="color:white;"><?= $user['nome'] ?></li><br>
							<a href="logout.php">Sair</a>

						<?php 	else: ?>

							<li ><a href="login.php"  >Login</a></li>
							<li><a  href="register.php"  >Registrar</a></li>

						<?php endif ?>

					</ul>
					
					<div class="clearfix"> </div>
			</div>
				<div class="clearfix"> </div>
		</div>
		</div>
	<div class="container">
			<div class="head-top">
				<div class="logo">
					<a href="index.php"><img src="images/logo.png" alt=""></a>
				</div>
		   		  <div class=" h_menu4">
				<ul class="memenu skyblue">
					  <li class="active grid"><a class="color8" href="index.php">Home</a></li>
				      <li><a class="color1" href="#">Moda</a>
				      	<div class="mepanel">
						<div class="row">
							<div class="col1">
								<div class="h_nav">
									<ul><a href="Roupas_Masculinas.php"> Roupas Masculinas</a>
										<li><a href="camiseta_Masc.php">Camisetas</a></li>
										<li><a href="moletom_Masc.php">Moletons</a></li>
										<li><a href="bermuda_Masc.php">Bermudas</a></li>
										<li><a href="meias_Masc.php">Meias</a></li>
										<br>
										<a href="Roupas_Infantis.php"> Roupas Infantis</a>
										
										<li><a href="camiseta_Infa.php">Camisetas</a></li>
										<li><a href="bodies_Infa.php">Bodies</a></li>
										<li><a href="pijama_Infa.php">Pijamas</a></li>
										<li><a href="meias_Infa.php">Meias</a></li>
									</ul>
								</div>
							</div>
							<div class="col1">
								<div class="h_nav">
									<ul>
									<a href="Roupas_Femininas.php"> Roupas Femininas</a>
										<li><a href="camiseta_Fem.php">Camisetas</a></li>
										<li><a href="moletom_Fem.php">Moletons</a></li>
										<li><a href="Saias_shorts.php">Saias e Shorts</a></li>
										<li><a href="meias_Fem.php">Meias</a></li></br>
										<a href="Calcados.php"> Calçados</a>
										<li><a href="Calcados_Chinelos.php">Chinelos</a></li>
										<li><a href="Calcados_Tenis.php">Tênis</a></li>
										<li><a href="Calcados_Botas.php">Botas</a></li>
										
									</ul>
								</div>
							</div>
							<div class="col1">
								<div class="h_nav">
								<br><br>
									<ul>
									
									<img src="images/s7.png" align="right" height="260" width="320"/>
							
							
							</ul>
						  </div>
						</div>
					</li>
				    <li class="grid"><a class="color2" href="#">	Acessorios</a>
					  	<div class="mepanel">
						<div class="row">
							<div class="col1">
								<div class="h_nav">
									<ul>
									   <a href="Uso_Pessoal.php"> Uso Pessoal</a>
										<li><a href="Uso_Pessoal_Bijuterias.php">Bijuterias</a></li>
										<li><a href="Uso_Pessoal_Bones_Gorros.php">Bonés e Gorros</a></li>
										<li><a href="Uso_Pessoal_Carteira.php">Carteiras</a></li>
										<li><a href="Uso_Pessoal_Fantasias.php">Fantasias e Cosplay</a></li>
										<li><a href="Uso_Pessoal_Mochilas.php">Mochilas</a></li>
										<li><a href="Uso_Pessoal_Necessaires.php">Necessaires</a></li>
										
									
									</ul>
								</div>
							</div>
							<div class="col1">
								<div class="h_nav">
									<ul>
										<a href="Uso_Variado.php"> Uso Variado</a>
										<li><a href="Uso_Variado_Audio_Gadgets.php">Áudio e Gadgets</a></li>
										<li><a href="Uso_Variado_Acessorios_Info.php">Informática e Acessórios</a></li>
										<li><a href="Uso_Variado_Capas.php">Capas para Celulares</a></li>
										<li><a href="Uso_Variado_Chaveiro.php">Chaveiros</a></li>
										<li><a href="Uso_Variado_Corrente.php">Correntes</a></li>
									
									</ul>
								</div>
							</div>
							<div class="col1">
								<div class="h_nav">
								<br>
									<ul>
									
									<img src="images/s8.png" align="right" height="290" width="320"/>
									</ul>
								</div>
							</div>
						  </div>
						</div>
			    </li>
				<li><a class="color4" href="Brinquedos.php">Brinquedos</a></li>
				<li><a class="color6" href="contact.php">Contato</a></li>
			  </ul>
			</div>

				<div class="clearfix"> </div>
		</div>
		</div>

	</div>


<!--content-->
<!---->
		<div class="product">
			<div class="container">
				<div class="col-md-3 product-price">

				<div class=" rsidebar span_1_of_left">
					<div class="of-left">
						<h3 class="cate">Modelos</h3>
					</div>
		 <ul class="menu">
		<li class="item1"><a href="camiseta_Infa.php">Camiseta Basica </a>
			
		</li>
		
		
		<li class="item4"><a href="#">Raglan Masculina</a>
			
		</li>
	
		
			
		
		<li class="item4"><a href="#">Regata Masculina</a>
			
		</li>
		

	
		
	
	
	</ul>
					</div>
				<!--initiate accordion-->
		<script type="text/javascript">
			$(function() {
			    var menu_ul = $('.menu > li > ul'),
			           menu_a  = $('.menu > li > a');
			    menu_ul.hide();
			    menu_a.click(function(e) {
			        e.preventDefault();
			        if(!$(this).hasClass('active')) {
			            menu_a.removeClass('active');
			            menu_ul.filter(':visible').slideUp('normal');
			            $(this).addClass('active').next().stop(true,true).slideDown('normal');
			        } else {
			            $(this).removeClass('active');
			            $(this).next().stop(true,true).slideUp('normal');
			        }
			    });

			});
		</script>
<!---->
	
	<div class=" rsidebar span_1_of_left">
					<div class="of-left">
						<h3 class="cate">Personagens</h3>
					</div>
		 <ul class="menu">
		

		<li class="item4"><a href="#">Marvel</a>
			<ul class="cute">
				<li class="subitem1"><a href="product.html">Homem-Aranha </a></li>
				<li class="subitem2"><a href="product.html">Homem de Ferro </a></li>
				<li class="subitem3"><a href="product.html">Capitão América </a></li>
				<li class="subitem3"><a href="product.html">Thor </a></li>
				<li class="subitem3"><a href="product.html">Hulk </a></li>
				<li class="subitem3"><a href="product.html">Luke Cage </a></li>
				<li class="subitem3"><a href="product.html">Deadpool  </a></li>
				<li class="subitem3"><a href="product.html">O Justiceiro </a></li>
				<li class="subitem3"><a href="product.html">Demolidor </a></li>
				<li class="subitem3"><a href="product.html">Doutor Estranho </a></li>
				<li class="subitem3"><a href="product.html">Guardiões da Galaxia </a></li>
				<li class="subitem3"><a href="product.html">Os Vingadores </a></li>
				<li class="subitem3"><a href="product.html">X-men </a></li>
			</ul>
		</li>
		<li class="item4"><a href="#">Dc</a>
			<ul class="cute">
				<li class="subitem1"><a href="product.html">Batman  </a></li>
				<li class="subitem2"><a href="product.html">Superman  </a></li>
				<li class="subitem3"><a href="product.html">Flash  </a></li>
				<li class="subitem3"><a href="product.html">Lanterna Verde </a></li>
				<li class="subitem3"><a href="product.html">Coringa  </a></li>
				<li class="subitem3"><a href="product.html">Arqueiro Verde  </a></li>
				<li class="subitem3"><a href="product.html">Mulher-Maravilha </a></li>
				<li class="subitem3"><a href="product.html">Cyborg   </a></li>
				<li class="subitem3"><a href="product.html">Aquaman   </a></li>
				<li class="subitem3"><a href="product.html">Mulher-Gato </a></li> 
				<li class="subitem3"><a href="product.html">Exterminador  </a></li>
				<li class="subitem3"><a href="product.html">Liga da Justiça </a></li>
				<li class="subitem3"><a href="product.html">Esquadrão Suicida </a></li>
			</ul>
		</li>
		
	
	
	</ul>
					</div>
	
	
						<div class="sellers">
							<div class="of-left-in">
								<h3 class="tag">Tamanhos</h3>
							</div>
								<div class="tags">
									<ul>
										<li><a href="#">G</a></li>
										<li><a href="#">G1</a></li>
										<li><a href="#">G2</a></li>
										<li><a href="#">G3</a></li>
										<li><a href="#">G4</a></li>
										<li><a href="#">G5</a></li>
										<li><a href="#">GG</a></li>
										<li><a href="#">P</a></li>
										<li><a href="#">PP</a></li>
										<li><a href="#">M</a></li>
										<li><a href="#">XG</a></li>
										<li><a href="#">XGG</a></li>

										<div class="clearfix"> </div>
									</ul>

								</div>

		</div>
				<!---->
				<div class="product-bottom">
					
					<div class="of-left">
						<h3 class="cate">Faixa de Preço</h3>
					</div>
		 <ul class="menu">
		<li class="item1"><a href="#">R$99,99 </a>
			
		</li>
		<li class="item2"><a href="#">R$99,99 </a>
			
		</li>
		<li class="item3"><a href="#">R$99,99</a>
			
		</li>
		<li class="item4"><a href="#">R$99,99</a>
			
		</li>

		<li class="item4"><a href="#">R$99,99</a>
			
		</li>
		
		
	
	
	</ul>
							

				</div>
				
				
<div class=" per1">
				<a href="single.php" ><img class="img-responsive" src="Produtos/Imagens/Camisetas masculinas/camisa_masc_1.jpg" alt="">
				<div class="six1">
					<h4>DISCOUNT</h4>
					<p>Up to</p>
					<span>60%</span>
				</div></a>
			</div>
				</div>
				
			
				<div class="col-md-9 product1">
				<div class=" bottom-product">
			
			   <?php
			
			   
			   error_reporting (E_ALL & ~ E_NOTICE & ~ E_DEPRECATED);
			   require("banco.php");
			   
		$server = "localhost";

$db = "produtos"; // Indique o nome do banco de dados que será aberto

$usuario = "root"; // Indique o nome do usuário que tem acesso

$password = ""; // Indique a senha do usuário	



//1º passo - Conecta ao servidor MySQL

$conect = mysql_connect($server,$user,$password ) or die (mysql_error());

//2º passo - Seleciona o Banco de Dados

$select_db = mysql_select_db($db) or die (mysql_error());
		
            
          $sql = "SELECT * FROM camiseta_Masc";
		  
          $qr = mysql_query($sql) or die(mysql_error());
		  
          while($ln = mysql_fetch_assoc($qr)){
			  
					echo '<div class="col-md-4 bottom-cd simpleCart_shelfItem">';
					echo '<div class="product-at ">';
					echo		'<a href="single.php"><img class="img-responsive" src="Produtos/Imagens/Camisetas masculinas/'.$ln['imagem'].'" />';
					echo		'<div class="pro-grid">';
					echo					'<span class="buy-in">Buy Now</span>';
					echo		'</div>';
					echo	'</a>';
					echo	'</div>';
					echo    '<br>';
					echo	'<font color="black" font face="Roboto" align="center" size="3px">'.$ln['nome'].'</font>';
					echo '<p>';
					echo     '<font color="#00688B" size="2px">Por R$ '.number_format($ln['preco'], 2, ',', '.').'</font>';
					echo    '<div class="content">';
					echo  '<a href="checkout.php?acao=add&id='.$ln['id'].'" class="botao01">Comprar</a>';
					echo   '</div>';
					echo '<br><br>';
					echo   '</div>';
		  }
					 ?>
					
						
					
					
						
					<div class="clearfix"> </div>
				</div>
					<div class=" bottom-product">
					
			
				
					<div class="clearfix"> </div>
				</div>

				</div>
		<div class="clearfix"> </div>
		<nav class="in">
				  <ul class="pagination">
					<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
					<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
					<li><a href="#">2 <span class="sr-only"></span></a></li>
					<li><a href="#">3 <span class="sr-only"></span></a></li>
					<li><a href="#">4 <span class="sr-only"></span></a></li>
					<li><a href="#">5 <span class="sr-only"></span></a></li>
					 <li> <a href="#" aria-label="Next"><span aria-hidden="true">»</span> </a> </li>
				  </ul>
				</nav>
		</div>

		</div>

				<!---->

<!--//content-->
<div class="footer">
				<div class="container">
			<div class="footer-top-at">

				<div class="col-md-4 amet-sed">
				<h4>Mais informações</h4>
				<ul class="nav-bottom">
						<li><a href="blog.php">Quem somos</a></li>
						<li><a href="sobre.php">Dúvidas</a></li>
						<li><a href="contact.php">Localização</a></li>
						<li><a href="register.php">Cadastro</a></li>
					</ul>
				</div>
				<div class="col-md-4 amet-sed ">
					<h4>Dados de contato</h4>
						<p>Tel:(17)3543-0000</p>
						<p>Fax:190-4509-494</p>
						<p>Email: [email protected]</p>
					<ul class="social">
						<li><a href="#"><i> </i></a></li>
						<li><a href="#"><i class="twitter"> </i></a></li>
						<li><a href="#"><i class="rss"> </i></a></li>
						<li><a href="#"><i class="gmail"> </i></a></li>

					</ul>
				</div>
				<div class="col-md-4 amet-sed">
					<h4>Newsletter</h4>
					<p>Cadastre seu email para receber novidades</p>
					<form>
						<input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
						<input type="submit" value="Enviar">
					</form>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="footer-class">
		<p >© 2017 Site Marvel Dc | Site de Venda de produtos </p>
		</div>
		</div>
</body>
</html>
    
asked by anonymous 02.11.2017 / 20:07

1 answer

1

You can use JavaScript by leaving hidden parts until the "button" is pressed. For example:

The button is hidden:

< input type = 'button' id="button" style="visibility: hidden;" / >

Then just create a trigger to call the JavaScript function that makes the button visible:

document.getElementById ("button") style.visibility="visible";

    
03.11.2017 / 11:41
Jquery plugins use different versions, how to get around it? Theme that is used in the landing of the Atom IDE