Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Tiago Henrique_158381

Abrir conteudo em uma DIV em jquery

Por , em Javascript

Recommended Posts

Tiago Henrique_158381    0

Tiago Henrique_158381
Postado

Olá,

 

Sou leigo em Jquery, gostaria de uma breve explicação de como eu carrego div dentro de outra div com Jquery.

 

Também se possível como faço isso atráves de um select box:

 

Vejam o exemplo:

 

qdi4a.jpg

 

 

Desde de já fico grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

@fabiosantosrj    0

@fabiosantosrj
Postado 
<html>
<head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
	<div id="div1" style="background:darkgreen;width:300px;height:300px"></div>
<script>
	$("#div1").html("<div style='background:red;width:100px;height:200px;margin:0 auto;'></div>");
</script>
</body>
</html>

Acho que é isso o que você quer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Henrique_158381    0

Tiago Henrique_158381
Postado

Olá Fabio,

 

Eu gostaria de saber como faço para quando clicar em algum link, abrir uma DIV especifica dentro de outra...

 

Como se fosse abas...

 

Sobre o Select eu achei um código na net:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Selectbox</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
		width:300px;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }
	.pink(background:pink; }
</style>




<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("select").change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=="red"){
                    $(".box").fadeOut(1);
                    $(".red").fadeIn(1000);
                }
                if($(this).attr("value")=="green"){
                    $(".box").fadeOut(1);
                    $(".green").fadeIn(1000);
                }
                if($(this).attr("value")=="blue"){
                    $(".box").fadeOut(1);
                    $(".blue").fadeIn(1000);
                }
				 if($(this).attr("value")=="pink"){
                    $(".box").fadeOut(1);
                    $(".pink").fadeIn(1000);
                }
            });
        }).change();
    });
</script>
</head>
<body>
    <div>
        <select>
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
			   <option value="pink">Pink</option>
        </select>
    </div>
    <div class="red box"><img src="camisa.jpg"> </a></div>
    <div class="green box">Teste</div>
    <div class="blue box">Teste</div>
	<div class="pink box">Teste</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

@fabiosantosrj    0

@fabiosantosrj
Postado

da uma olhada nesse.


<html>
	<head>
		<style type="text/css">
		ul.tabs {
			list-style: none;
			margin: 0px;
			padding-bottom: 2px;
			padding-left: 3px;
			padding-right: 0px;
			padding-top: 5px;
			float: left;
			height: 30px;
			border-bottom: 1px solid #999;
			border-left: 1px solid #999;
			width: 50%;
			-ms-filter:
				"progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFA500, endColorstr=#FFC04D)";
			/*Como sabemos o IE é sempre o problema dos desenvolvedores. Para utilizar um efeito Gradiente do Css3 no IE é necessário acrescentar esta linha*/
			-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFA500,
				endColorstr=#FFC04D );
			/*IE 5.5 - 7  ------ Esta linha faz com que o efeito gradiente do Css3 funciona em versões antigas do IE*/
			background: -moz-linear-gradient(top, #FFA500, #FFC04D) repeat-X;
			background: -webkit-gradient(linear, left top, left bottom, from(#FFA500),
				to(#FFC04D) ) repeat-X;
		}
		 
		ul.tabs li {
			float: left;
			margin: 1px;
			padding: 0px;
			height: 30px;
			line-height: 31px;
			border: 1px solid #999;
			border-left: none;
			margin-bottom: -1px;
			overflow: hidden;
			position: relative;
		}
		 
		ul.tabs li a {
			text-decoration: none;
			color: White;
			font: bold;
			display: block;
			font-size: 1.2em;
			font-family: Times New Roman;
			padding: 0 20px;
			border: 1px solid #fff;
			outline: none;
		}
		 
		ul.tabs li.active a
			/*Deixa a cor da fonte laranja assim que aba se torna ativa*/ {
			color: #E68A00;
		}
		 
		ul.tabs li a:hover {
			background: #FFEBCC;
			color: #E68A00;
		}
		 
		html ul.tabs li.active {
			color: #E68A00;
			background: #fff;
			/* a aba aparece com o fundo branco quando selecionada*/
			border-bottom: 1px solid #fff;
			/*--faz a aba ativa parecer conectada com seu conteudo--*/
		}
		 
		html ul.tabs li.active a:hover
			/*--Faz a lista ativa nao obedecer as propriedades do hover--*/ {
			color: #E68A00;
			background: #fff;
			border-bottom: 1px solid #fff;
		}
		 
		.tab_container {
			border-top: none;
			overflow: hidden;
			clear: both;
			float: left;
			width: 50%;
			background: #fff;
		}
		 
		.cont_tab {
			padding: 25px;
			font-size: 1.2em;
			border-top-width: 0px;
		}
		 
		fieldset {
			width: 300px;
		}
		 
		#btnInserir {
			width: 100%
		}

		</style>
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script>
		$(document).ready(function(){
	        $(".cont_tab").hide();
	        $("ul.tabs li:first").addClass("active").show();
	        $(".cont_tab:first").show();
	        $("ul.tabs li").click(function () {
	            $("ul.tabs li").removeClass("active")
	            $(this).addClass("active")
	            $(".cont_tab").hide();
	            var activeTab = $(this).find("a").attr("href");
	            $(activeTab).fadeIn("slow");
	            return false;
		});

		/*Efeito Zebrado*/
	    $('tr:odd').css('background','#FFEBCC');
		});
		</script>
	</head>
<body>
<form id="form"><!--A tag ul contem os titulos das abas-->
<ul class="tabs">
	<li><a href="#Create">Cadastrar</a></li>
	<li><a href="#Read">Editar</a></li>
	<li><a href="#Update">Visualizar</a></li>
	<li><a href="#Delete">Deletar</a></li>
</ul>
<div class="tab_container">
<div class="cont_tab" id="Create">
<fieldset><legend>Cadastrar</legend>
<table class="Color">
<tbody>
<tr>
<td align="right"><label for="txtNome"><em>Nome:</em>
</label></td>
<td align="left"><input id="txtNome" type="text" autofocus="" required="" /></td>
</tr>
<tr>
<td align="right"><label for="txtEmail"><em>Email:</em>
</label></td>
<td align="left"><input id="txtEmail" type="email" /></td>
</tr>
<tr>
<td align="right"><label for="txtCpf"><em>CPF:</em>
</label></td>
<td align="left"><input id="txtCpf" title="Digite o CPF no formato nnn.nnn.nnn-nn" type="cpf" pattern="\d{3}\.\d{3}\.\d{3}-\d{2}" required="" /></td>
</tr>
<tr>
<td align="right"><label for="txtIdade"><em>Idade:</em>
</label></td>
<td align="left"><input id="txtIdade" type="text" required="" /></td>
</tr>
<tr>
<td align="right"></td>
<td align="left"><input id="btnInserir" type="submit" value="Inserir" /></td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<div class="cont_tab" id="Read">
<fieldset><legend>Editar</legend>
<table class="Color">
<tbody>
<tr>
<td align="right"><label for="txtNome"><em>Nome:</em>
</label></td>
<td align="left"><input id="txtNome" type="text" autofocus="" required="" /></td>
</tr>
<tr>
<td align="right"><label for="txtEmail"><em>Email:</em>
</label></td>
<td align="left"><input id="txtEmail" type="email" /></td>
</tr>
<tr>
<td align="right"><label for="txtCpf"><em>CPF:</em>
</label></td>
<td align="left"><input id="txtCpf" type="cpf" required="" /></td>
</tr>
<tr>
<td align="right"><label for="txtIdade"><em>Idade:</em>
</label></td>
<td align="left"><input id="txtIdade" type="text" required="" /></td>
</tr>
<tr>
<td align="right"></td>
<td align="left"><input id="btnEditar" type="submit" value="Editar" /></td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<div class="cont_tab" id="Update">
<fieldset><legend>Visualizar</legend>
<table class="Color">
<tbody>
<tr>
<td align="right"><label for="txtNome"><em>Nome:</em>
</label></td>
<td align="left"><input id="txtNome" type="text" autofocus="" required="" /></td>
</tr>
<tr>
<td align="right"><label for="txtEmail"><em>Email:</em>
</label></td>
<td align="left"><input id="txtEmail" type="email" /></td>
</tr>
<tr>
<td align="right"><label for="txtCpf"><em>CPF:</em>
</label></td>
<td align="left"><input id="txtCpf" type="cpf" required="" /></td>
</tr>
<tr>
<td align="right"><label for="txtIdade"><em>Idade:</em>
</label></td>
<td align="left"><input id="txtIdade" type="text" required="" /></td>
</tr>
<tr>
<td align="right"></td>
<td align="left"><input id="btnEditar" type="submit" value="Editar" /></td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<div class="cont_tab" id="Delete">
<fieldset><legend>Excluir</legend>
<table class="Color">
<tbody>
<tr>
<td align="right"><label for="txtNome"><em>Nome:</em>
</label></td>
<td align="left"><input id="txtNome" type="text" autofocus="" required="" /></td>
</tr>
<tr>
<td align="right"><label for="txtEmail"><em>Email:</em>
</label></td>
<td align="left"><input id="txtEmail" type="email" /></td>
</tr>
<tr>
<td align="right"><label for="txtCpf"><em>CPF:</em>
</label></td>
<td align="left"><input id="txtCpf" type="cpf" required="" /></td>
</tr>
<tr>
<td align="right"><label for="txtIdade"><em>Idade:</em>
</label></td>
<td align="left"><input id="txtIdade" type="text" required="" /></td>
</tr>
<tr>
<td align="right"></td>
<td align="left"><input id="btnExcluir" type="submit" value="Excluir" /></td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</div>
</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Khwesten Heiner    9

Khwesten Heiner
Postado

Cara, eu estou fazendo algo muito parecido com isso aew, olha esse link:

 

http://tamivideo.com.br/adm/

 

Clica em cadastro e depois em cliente, neh isso que você quer???

Faço assim:

$(document).ready(function() {
        
        $("#registerClient").click(function() {
            $("#registerContainer").animate({minHeight: '100px'}, function(){
                $("#registerContent").load('arquivo');
            });
        });
});

E onde eu clico coloco um id para ele reconhecer no JS.

<a href="#" e id="alguma coisa">alguma coisa</a>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito