Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

lytz

highlight na segunda unordered list

Mensagens Recomendadas

lytz

Boas,

Tou a iniciar no HTML e tenho uma dúvida.

Tendo duas ul's e quero que apareça uma barra lateral ou um background colorido no li da segunda ul, correspondente à minha escolha na primeira ul. Ou seja, eu clico na primeira ul, onde diz "Departamento de Direito" e isto faz scroll até aqui: <li id="d1"> (na segunda ul) e quero que apareça a tal barra lateral ao longo do li id=d1.

Já tentei com onclick, mas não consigo fazer com que apareça na segunda ul. Só consegui um highlight onde cliquei na primeira ul  :hmm:

Alguém me pode dar uma ajuda sff?

<h1>Departamentos</h1>
	<ul class="dep">
		<li><a href="#d1">Departamento de Direito</a></li>
		<li><a href="#d2">Departamento de Ciências Económicas e Empresariais</a></li>
		<li><a href="#d3">Departamento de Ciências da Educação e do Património</a></li>
		<li><a href="#d4">Departamento de Inovação, Ciência e Tecnologia</a></li>
	</ul>
</div>

<ul class="content">
	<li id="d1">
		<span>Departamento de Direito</span>
		<ul>
                <li><a href="http://wwwa.uportu.pt/siaa/Horarios/Horario_Direito12A1_20101.pdf">Direito 1º ano, 2º semestre, turma A1</a></li>
                <li><a href="">Direito 1º ano, 2º semestre, turma A2</a></li>
                <li><a href="">Direito 1º ano, 2º semestre, turma A3</a></li>
                <li><a href="">Direito 1º ano, 2º semestre, turma B</a></li>
            </ul>
	</li>

	<li id="d2">
		<span>Departamento de Ciências Económicas e Empresariais</span>
		<ul>
                <li><a href="">Direito 1º ano, 2º semestre, turma A1</a></li>
                <li><a href="">Economia 1º ano, 2º semestre (diurno)</a></li>
                <li><a href="">Economia 2º ano, 2º semestre (diurno)</a></li>
                <li><a href="">Gestão 1º ano, 2º semestre (diurno)</a></li>
            </ul>
	</li>

	<li id="d3">
		<span>Departamento de Ciências da Educação e do Património</span>
		<ul>
                <li><a href="">Direito 1º ano, 2º semestre, turma A1</a></li>
                <li><a href="">Direito 1º ano, 2º semestre, turma A2</a></li>
                <li><a href="">Direito 1º ano, 2º semestre, turma A3</a></li>
                <li><a href="">Direito 1º ano, 2º semestre, turma B</a></li>
            </ul>
	</li>

	<li id="d4">
		<span>Departamento de Inovação, Ciência e Tecnologia</span>
		<ul>
                <li><a href="">Informática de Gestão e Ramo Software 1º ano, 2º semestre (diurno)</a></li>
                <li><a href="">Direito 1º ano, 2º semestre, turma A3</a></li>
                <li><a href="">Direito 1º ano, 2º semestre, turma B</a></li>
            </ul>
	</li>
</ul>

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
lytz

function enact(what){
     var p = what.parentNode;
     var els = p.getElementsByTagName('li');
     for(i=0;i<els.length;i++){
          els[i].className = '';
     }
     what.className = 'active';
}

o active (css) apenas muda o background color

e no HTML pus isto

<ul>
<li onclick="enact(this);">blablabla</li>

mas assim ele só muda o background no li que eu cliquei, e eu quero que mude o background na li da ul debaixo correspondente ao li que cliquei em cima. Ficou confuso acho  :-[

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
pwseo

Fiz um pequeno exemplo, não sei se é o que pretendes... mas talvez possas pegar nele e adaptar :)

Não está assim muito bem feito, mas também foi apenas para te orientar.

<!-- ficheiro index.html -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Teste</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <h1>Título!</h1>
        <ul id="links">
            <li><a href="#d1">Dep 1</a></li>
            <li><a href="#d2">Dep 2</a></li>
            <li><a href="#d3">Dep 3</a></li>
        </ul>
        <div id="content">
            <div id="d1">
                <h2>Dep 1</h2>
                <ul>
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                    <li><a href="#">link 3</a></li>
                </ul>
            </div>
            <div id="d2">
                <h2>Dep 2</h2>
                <ul>
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                    <li><a href="#">link 3</a></li>
                </ul>
            </div>
            <div id="d3">
                <h2>Dep 3</h2>
                <ul>
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                    <li><a href="#">link 3</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

// ficheiro script.js

(function() {
    function doit() {
        var links = document.getElementById("links").getElementsByTagName("a");

        for (i = 0; i < links.length; i++) {
            links[i].onclick = function() {
                var divs = document.getElementById("content").getElementsByTagName("div");
                for (j = 0; j < divs.length; j++) {
                    divs[j].className = '';
                }
                var id = this.getAttribute("href").replace(/^#/, '');
                document.getElementById(id).className = 'active';
            }
        }
    }

    if (window.addEventListener) {
        window.addEventListener("load", doit, false);
    }
    else {
        window.attachEvent("onload", doit);
    }
})();

/* ficheiro style.css */

.active h2 {
    color: #00f;
}

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.