Utilizando o conhecimento combinado das tecnologias web fundamentais, vamos criar um efeito de abas populares em portais de notícias:

Conteúdo textual:
Imóveis:
    275mil para apartamento de 3 quartos perto do metrô
    200mil para apartamento de 3 quartos no anel viário
    Primeiro edifício sem entrada em Pequim
    Promoção de 5000 Yuans em empreendimento
Decoração:
    Reforma de apartamento de 40m² para jovem
    Estilo europeu moderno para residência de 90m²
    Combinação de cores em apartamento de 66m²
    Design de banheiro com porcelanato
Imóveis Usados:
    Apartmento de 3 quartos por 2.6 milhões
    Apartamento de 2 quartos por 2.9 milhões
    Escola primária Huangchenggen por 2.6 milhões
    Sobrado por 2.8 milhões

A abordagem inicial consiste em estruturar o HTML, aplicar os estilos CSS e utilizar JavaScript para manipular os elementos DOM, permitindo a alternância entre as abas.

Estrutura HTML

A página deve exibir todas as informações textuais organizadas em três cabeçalhos para as abas e seu respectivo conteúdo. A estrutura utiliza e - para os títulos, enquanto o conteúdo utiliza elementos. O resultado visual inicial apresenta: Estilos CSS ---------- Para alcançar o visual desejado do componente de abas, alguns pontos merecem atenção especial: 1. Estilização global do container de abas 2. Configuração dos títulos das abas 3. Estilos para o conteúdo de cada aba 4. Controle de visibilidade - apenas uma aba visível por vez Após a aplicação dos estilos, o resultado visual está pronto. Lógica JavaScript para Troca de Abas ------------------------------------ 1. Primeiramente, é necessário selecionar os elementos dos títulos e do conteúdo 2. Existem três conteúdos de abas que devem ser percorridos para identificar correspondência 3. Através da manipulação de classes CSS, a aba clicada torna-se visível enquanto as outras se ocultam Código Completo: ``` Sistema de Abas /* Estilização CSS */ *{padding:0px; margin:0px;} a{ text-decoration:none; color:black;} a:hover{text-decoration:none; color:#336699;} #container{width:270px; padding:5px;height:150px;margin:20px;} #container ul{list-style:none; display:block;height:30px;line-height:30px; border-bottom:2px #C88 solid;} #container ul li{background:#FFF;cursor:pointer;float:left; list-style:none height:29px; line-height:29px;padding:0px 10px; margin:0px 10px; border:1px solid #BBB; border-bottom:2px solid #C88;} #container ul li.active{border-top:2px solid gray; border-bottom:2px solid #FFF;} #container div{height:100px;width:250px; line-height:24px;border-top:none; padding:1px; border:1px solid #336699;padding:10px;} .hidden{display:none;}

// Implementação JavaScript para alternância de abas document.addEventListener('DOMContentLoaded', function(){ var container = document.getElementById("container"); var listaTitulos = container.getElementsByTagName("ul")[0]; var abas = listaTitulos.getElementsByTagName("li"); var conteudos = container.getElementsByTagName("div");

for(var indice = 0; indice < abas.length; indice++){ abas[indice].setAttribute('data-indice', indice); abas[indice].addEventListener('click', functon(){ var indiceAtual = this.getAttribute('data-indice');

for(var pos = 0; pos < abas.length; pos++){ abas[pos].classList.remove('active'); abas[pos].classList.add('inactive'); conteudos[pos].classList.add('hidden'); }

this.classList.remove('inactive'); this.classList.add('active'); conteudos[indiceAtual].classList.remove('hidden'); }); } });

• Imóveis
• Decoração
• Imóveis Usados

275mil para apartamento de 3 quartos perto do metrô 200mil para apartamento de 3 quartos no anel viário Primeiro edifício sem entrada em Pequim Promoção de 5000 Yuans em empreendimento

Reforma de apartamento de 40m² para jovem Estilo europeu moderno para residência de 90m² Combinação de cores em apartamento de 66m² Design de banheiro com porcelanato

Apartamento de 3 quartos por 2.6 milhões Apartamento de 2 quartos por 2.9 milhões Escola primária Huangchenggen por 2.6 milhões Sobrado por 2.8 milhões