← Javascript

Duvida carregar estilo do css

Lida 6932 vezes

Offline

flaviorodrigues 
Membro
Mensagens 326 Gostos 1
Feedback +2

Troféus totais: 24
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Boas, uma duvida estupida eu sei, mas não faço a minima ideia:

no css tenho o estilo da div:
#sec_menu {
   background: #319ecf url(layout/site/bg.gif) repeat-x;
   width: 100%;
   float: left;
}

Numa pagina html tenho:
 <div id="sec_menu" style="display: none">
texto </div>

Pronto funciona bem (tenho um evento javascript para por o display sem ser a "none")

Agora quero adicionar outra div exemplo: ter_menu
Entao faço <div id=ter_menu" style="display: none">
texto </div>

Mas isto não me vai carregar nada porque na folha css nao tenho la nenhum #ter_menu.

O que eu aqui queria era usar o estilo do #sec_menu

Como fazer isto sem repetir coisas?

obrigado, abraço

Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Se for o que percebi é fácil, no teu css tens #sec_menu, o # refere-se a ID, e como ID só pode existir um por pagína a solução passa por utilizar classes.

- 1º alterar no markup (html) div id="sec_menu" para div class="sec_menu" , depois no css alteras o #sec_menu para .sec_menu .

- Na 2º div que pretendes criar, fazes div class="sec_menu" , agora tem em atenção que a 2ª div vão ter exactamente os mesmos estilos que a 1ª div.

Qualquer dúvida diz.
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

#sec_menu, #ter_menu {
   bla bla: ;
   blu: ;
}
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Ou então a solução do Pedro, depende do que pretendes fazer, pessoalmente prefiro utilizar classes quando quero/preciso repetir código.
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Sim, classes é o melhor e mais correcto.

Mas podes depois querer modificar apenas um, assim já podes remover por exemplo o #ter_menu e meter à parte.

Mas como disses-te, depende do que ele quer. :)
Offline

flaviorodrigues 
Membro
Mensagens 326 Gostos 1
Feedback +2

Troféus totais: 24
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Se for o que percebi é fácil, no teu css tens #sec_menu, o # refere-se a ID, e como ID só pode existir um por pagína a solução passa por utilizar classes.

- 1º alterar no markup (html) div id="sec_menu" para div class="sec_menu" , depois no css alteras o #sec_menu para .sec_menu .

- Na 2º div que pretendes criar, fazes div class="sec_menu" , agora tem em atenção que a 2ª div vão ter exactamente os mesmos estilos que a 1ª div.

Qualquer dúvida diz.

É isto mesmo, 5* :)

funciona lindamente, coisa tão simples!

obrigado
Offline

flaviorodrigues 
Membro
Mensagens 326 Gostos 1
Feedback +2

Troféus totais: 24
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

So mais uma duvida

eu tou a fazer assim:
 <li><a href="javascript:showHide('sec_menu')" class="selected"><span><span>Inicio</span></span></a></li>
   <li><a href="javascript:showHide('ter_menu')"><span><span>menu 2</span></span></a></li>
                                     
Como fazer para quando selecionar o menu 2, ele colocar esse com a class="selected"?

obrigado,
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Isso só com Javascript, é para Wordpress?
Offline

flaviorodrigues 
Membro
Mensagens 326 Gostos 1
Feedback +2

Troféus totais: 24
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

não, é um porta em asp.net que estou a desenvolver
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

não, é um porta em asp.net que estou a desenvolver

Estás a usar jQuery?
Offline

flaviorodrigues 
Membro
Mensagens 326 Gostos 1
Feedback +2

Troféus totais: 24
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

não, estou a usar asp.net com vb + ajax
Offline

Pedro Magalhães 
Membro
Mensagens 397 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

CSS

Código: [Seleccione]
.menu{ /* estilos comuns */ }
.none{ display:none }
#sec_menu{ /* estilos únicos */ }
#ter_menu{ /* estilos únicos */ }

HTML

Código: [Seleccione]
<div id="sec_menu" class="menu none"><a href="#" class="sec_menu selected">xpto</a></div>
<div id="ter_menu" class="menu none"><a href="#" class="ter_menu">xpto</a></div>

Aconselho-te a usar jQuery no <head></head> do teu site...

Código: [Seleccione]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Código: [Seleccione]
$(document).ready(function(){

 $('a.sec_menu').click(function(){
  $('#sec_menu a').removeClass('selected');
  $('#sec_menu').toggle();
  $(this).toggleClass('selected');
 });

 $('a.ter_menu').click(function(){
  $('#ter_menu a').removeClass('selected');
  $('#ter_menu').toggle();
  $(this).toggleClass('selected');
 });

});

Espero que ajude...
O JS pode ser optimizado pois está a repetir código, mas como os menus são independentes, penso que é preferível assim.
Podes usar isto à vontade em asp.net com vb + ajax
Offline

flaviorodrigues 
Membro
Mensagens 326 Gostos 1
Feedback +2

Troféus totais: 24
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Boas, esse ultimo codigo coloco onde?

Outra coisa, eu estou a usar so um css para os menus:

 <div id="menus_wrapper">
                <div id="main_menu">
                    <ul>
                        <li><a href="javascript:showHide('sec_menu')" class="selected"><span><span>Inicio</span></span></a></li>
                        <li><a href="javascript:showHide('dados')"><span><span>Perfil</span></span></a></li>
           
                    </ul>
                </div>

Offline

flaviorodrigues 
Membro
Mensagens 326 Gostos 1
Feedback +2

Troféus totais: 24
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

bump!