Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Sign in to follow this  
lytz

highlight na segunda unordered list

Recommended Posts

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  🤔

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>

Share this post


Link to post
Share on other 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  😳

Share this post


Link to post
Share on other 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;
}

Share this post


Link to post
Share on other sites
lytz

É isso mesmo, faz o que pretendia.

Agora dou um jeitinho e fica como quero. Muito obrigado pela ajuda mesmo  :D

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.