Ir para conteúdo

POWERED BY:

Arquivado

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

bhion

Foco ao abrir menu

Por , em Desenvolvimento frontend

Recommended Posts

bhion    1

bhion
Postado

Estou fazendo um menu dinamico, com a função .(load).

 

Ao em um dos botoes abre uma aba, dependo do botao um conteudo externo diferente.

 

Um dos arquivos externos Desconfigura o foco da pagina, "rolando todo o conteudo para baixo".

 

<!doctype html>
<html lang="en">
<head>
<style>
#lista_programas{
width: 200px;
padding-left: 100px;
}
#programa{
display: none;
}
</style>
<script>
$("a.programas").click(function(){
$("#programa").show();
});
</script>
</head>
<body>
<div id="lista_programas">
<ul>
<li><a href="#programa" class="programas">Programas 1</a></li>
<li><a href="#programa" class="programas">Programas 2</a></li>
<li><a href="#programa" class="programas">Programas 3</a></li>
<li><a href="#programa" class="programas">Programas 4</a></li>
<li><a href="#programa" class="programas">Programas 5</a></li>
<li><a href="#programa" class="programas">Programas 6</a></li>
</ul>
</div>

<div id="programa">
<h1>Programa 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend pretium lectus scelerisque rutrum. Donec lacinia elit a risus fringilla vestibulum. Vestibulum bibendum augue non arcu ornare accumsan. Nam velit justo, interdum sit amet volutpat ac, aliquet et odio. Suspendisse molestie sodales justo, quis ultrices felis imperdiet a. Quisque sed augue odio. Maecenas neque lectus, fermentum eget bibendum eget, pharetra at eros. Suspendisse potenti. Nam in nulla eget neque accumsan facilisis. Duis pulvinar rhoncus tellus, sit amet porta nisl mattis eu. Aliquam mollis mattis rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris bibendum, elit eu egestas semper, nunc ligula tempor velit, fermentum sagittis ipsum nunc a nisi. Proin turpis justo, sagittis non porttitor ac, interdum at tellus. Nullam at lobortis torto</p>
</div>
</body>

O que eu quero fazer, é clicar no link e mostrar o texto, sem que a pagina role para baixo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

    $("a.programas").click(function( e ){

e.preventDefault();

$("#programa").show();

});

Compartilhar este post

Link para o post
Compartilhar em outros sites

bhion    1

bhion
Postado

<!doctype html>
<html lang="en">
<head>
<style>
#lista_programas{
width: 200px;
padding-left: 100px;
display: block;
}
.ul_programas{
width: 400px;
height: 100px;
background: red;
list-style-type: none;
text-decoration: none;
}
.li_programas{
background: green;
list-style-type: none;
text-align: center;
display: inline;
}
.a_programas{
font-family:Arial, Helvetica, sans-serif0;
list-style-type: none;
font-size:14px;
color: #FFF;
padding: 5px 12px;
}
#programa_1, #programa_2, #programa_3,
#programa_4, #programa_5, #programa_6{
display: none;
}
h1{
padding-left: 400px;
}
</style>
<script>
$("a.programas_1").click(function( e ){
e.preventDefault();
$("#programa_1").show();
});

$("#close_button").click(function(){
$("#content").hide("fast")
});
</script>
</head>
<body>
<div id="close_button">x</div>
<div id="lista_programas">
<ul class="ul_programas">
<li class="li_programas"><a href="#programa_1" class="a_programas">1</a></li>
<li class="li_programas"><a href="#programa_2" class="a_programas">2</a></li>
<li class="li_programas"><a href="#programa_3" class="a_programas">3</a></li>
<li class="li_programas"><a href="#programa_4" class="a_programas">4</a></li>
<li class="li_programas"><a href="#programa_5" class="a_programas">5</a></li>
<li class="li_programas"><a href="#programa_6" class="a_programas">6</a></li>
</ul>
</div>

<div id="programa_1">
<h1>Programa 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend pretium lectus scelerisque rutrum. Donec lacinia elit a risus fringilla vestibulum. Vestibulum bibendum augue non arcu ornare accumsan. Nam velit justo, interdum sit amet volutpat ac, aliquet et odio. Suspendisse molestie sodales justo, quis ultrices felis imperdiet a. Quisque sed augue odio. Maecenas neque lectus, fermentum eget bibendum eget, pharetra at eros. Suspendisse potenti. Nam in nulla eget neque accumsan facilisis. Duis pulvinar rhoncus tellus, sit amet porta nisl mattis eu. Aliquam mollis mattis rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris bibendum, elit eu egestas semper, nunc ligula tempor velit, fermentum sagittis ipsum nunc a nisi. Proin turpis justo, sagittis non porttitor ac, interdum at tellus. Nullam at lobortis torto</p>
</div>
<div id="programa_2">
<h1>Programa 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend pretium lectus scelerisque rutrum. Donec lacinia elit a risus fringilla vestibulum. Vestibulum bibendum augue non arcu ornare accumsan. Nam velit justo, interdum sit amet volutpat ac, aliquet et odio. Suspendisse molestie sodales justo, quis ultrices felis imperdiet a. Quisque sed augue odio. Maecenas neque lectus, fermentum eget bibendum eget, pharetra at eros. Suspendisse potenti. Nam in nulla eget neque accumsan facilisis. Duis pulvinar rhoncus tellus, sit amet porta nisl mattis eu. Aliquam mollis mattis rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris bibendum, elit eu egestas semper, nunc ligula tempor velit, fermentum sagittis ipsum nunc a nisi. Proin turpis justo, sagittis non porttitor ac, interdum at tellus. Nullam at lobortis torto</p>
</div>
<div id="programa_3">
<h1>Programa 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend pretium lectus scelerisque rutrum. Donec lacinia elit a risus fringilla vestibulum. Vestibulum bibendum augue non arcu ornare accumsan. Nam velit justo, interdum sit amet volutpat ac, aliquet et odio. Suspendisse molestie sodales justo, quis ultrices felis imperdiet a. Quisque sed augue odio. Maecenas neque lectus, fermentum eget bibendum eget, pharetra at eros. Suspendisse potenti. Nam in nulla eget neque accumsan facilisis. Duis pulvinar rhoncus tellus, sit amet porta nisl mattis eu. Aliquam mollis mattis rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris bibendum, elit eu egestas semper, nunc ligula tempor velit, fermentum sagittis ipsum nunc a nisi. Proin turpis justo, sagittis non porttitor ac, interdum at tellus. Nullam at lobortis torto</p>
</div>
<div id="programa_4">
<h1>Programa 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend pretium lectus scelerisque rutrum. Donec lacinia elit a risus fringilla vestibulum. Vestibulum bibendum augue non arcu ornare accumsan. Nam velit justo, interdum sit amet volutpat ac, aliquet et odio. Suspendisse molestie sodales justo, quis ultrices felis imperdiet a. Quisque sed augue odio. Maecenas neque lectus, fermentum eget bibendum eget, pharetra at eros. Suspendisse potenti. Nam in nulla eget neque accumsan facilisis. Duis pulvinar rhoncus tellus, sit amet porta nisl mattis eu. Aliquam mollis mattis rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris bibendum, elit eu egestas semper, nunc ligula tempor velit, fermentum sagittis ipsum nunc a nisi. Proin turpis justo, sagittis non porttitor ac, interdum at tellus. Nullam at lobortis torto</p>
</div>
<div id="programa_5">
<h1>Programa 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend pretium lectus scelerisque rutrum. Donec lacinia elit a risus fringilla vestibulum. Vestibulum bibendum augue non arcu ornare accumsan. Nam velit justo, interdum sit amet volutpat ac, aliquet et odio. Suspendisse molestie sodales justo, quis ultrices felis imperdiet a. Quisque sed augue odio. Maecenas neque lectus, fermentum eget bibendum eget, pharetra at eros. Suspendisse potenti. Nam in nulla eget neque accumsan facilisis. Duis pulvinar rhoncus tellus, sit amet porta nisl mattis eu. Aliquam mollis mattis rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris bibendum, elit eu egestas semper, nunc ligula tempor velit, fermentum sagittis ipsum nunc a nisi. Proin turpis justo, sagittis non porttitor ac, interdum at tellus. Nullam at lobortis torto</p>
</div>
<div id="programa_6">
<h1>Programa 6</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend pretium lectus scelerisque rutrum. Donec lacinia elit a risus fringilla vestibulum. Vestibulum bibendum augue non arcu ornare accumsan. Nam velit justo, interdum sit amet volutpat ac, aliquet et odio. Suspendisse molestie sodales justo, quis ultrices felis imperdiet a. Quisque sed augue odio. Maecenas neque lectus, fermentum eget bibendum eget, pharetra at eros. Suspendisse potenti. Nam in nulla eget neque accumsan facilisis. Duis pulvinar rhoncus tellus, sit amet porta nisl mattis eu. Aliquam mollis mattis rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris bibendum, elit eu egestas semper, nunc ligula tempor velit, fermentum sagittis ipsum nunc a nisi. Proin turpis justo, sagittis non porttitor ac, interdum at tellus. Nullam at lobortis torto</p>
</div>

</body>
</html>

 

 

Agora pra que cada <li> abra um link diferente, tem que fazer 6 vezes a função .click() ?

Compartilhar este post

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

Informação importante

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

  Aceito