Clicar em div, fechar a anterior e abrir...

[mzaidan 2]

O nome do tópico ta meio confuso, mas eu não achei um melhor para ele.

Vamos la:

Primeiramente, boa noite a todos.

 

Eu possuo uma imagem:

 

<img src="imagem.png">

 

Eu quero abrir uma div por cima dela.

Até ai, td bem, acho que consigo.

 

Essa imagem, é a imagem de um telão.

 

Além disso eu vou ter um menu, com varios links.

O que eu queria era: Ao clicar em cima de cada link, ele abrir uma outra div por cima do telão.

(fechando a outra)

 

É muito complicado?

Qual seria o caminho?

 

Grato.

[guilomaker 31]

eu pensei assim

 

https://jsfiddle.net/yj9f5qh8/49/embedded/result/

 

usando o toggle, mais não sei se e a melhor maneira! mais ta funcionando.

 

codigo:

 

http://jsfiddle.net/yj9f5qh8/49/

<div class="container">
<div class="tv">
<div class="div-1" style="display: none;">
<iframe width="845" height="428" src="https://www.youtube.com/embed/Xx628PEJ1Pk" frameborder="0" allowfullscreen></iframe></div>

<div class="div-2" style="display: none;">
 <iframe width="845" height="428" src="https://www.youtube.com/embed/KE8bgll2EyY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
 <div class="acionadores">
    <nav class="menu">
        <ul>
            <li><a href="#" class="dispara-1">Esportes</a></li>
            <li> <a href="#" class="dispara-2">Jogos</a></li>
        </ul>
    </nav>
</div>
</div>

body {
    background:#333;
}
.container {
    width:888px;
    height:500px;
    margin:auto;
}
.tv {
    background:url("http://www.fantasiaads.co.uk/page_images/TV.png") no-repeat;
    width:888px;
    height:492px;
    margin:auto;
    z-index:100;
    padding-bottom:9px;
}

.menu {
    width:888px;
    height:30px;
    z-index:200;
    margin:-65px 0 0 20px;
}
.menu ul {
    padding:6px;
}
.div-1 {
    background:green;
    width:845px;
    height:428px;
    position:absolute;
    margin:22px 0 0 22px;
    padding:0;
}
.menu ul li {
    display:inline;
}
.div-2 {
    background:red;
    width:845px;
    height:428px;
    position:absolute;
    margin:22px 0 0 22px;
}
.menu ul li {
    display:inline;
}
.menu ul li a {
    text-decoration:none;
    font-family:Arial, Verdana;
    font-size:20px;
    color:#fff;
    padding:10px;
}

$(function ($) {
    var div_1 = $('.div-1');
    $('a.dispara-1').click(function () {
        $(this).toggleClass('show');
        div_1.slideToggle(200);
        if ( $(this).hasClass('show') ) {
            $('a.dispara-2').removeClass('show');
            div_2.slideUp(200);
        }
        return false;
    });
    var div_2 = $('.div-2');
    $('a.dispara-2').click(function () {
        $(this).toggleClass('show');
        div_2.slideToggle(200);
        if ( $(this).hasClass('show') ) {
            $('a.dispara-1').removeClass('show');
            div_1.slideUp(200);
        }
        return false;   
     });
});

ai você customiza da sua forma, coloquei ai as divs que acionam e etc pra vc entender melhor, qual quer coisa só perguntar.

[mzaidan 2]

Mestre, valeu mesmo, você é o cara!!

[mzaidan 2]

Revivendo o tópico.

tenho o código acima.

Mas, o que eu estava querendo era o seguinte:

Ter apenas um item no menu e, ao clicar nele, abrir sempre a mesma pagina.

 

Tem como?