Смяна на дивове с javascript

[rivo]

Здравейте, един въпрос свързан с превключването на 2 дива.

Имам 2 дива:

<div id="1"></div>
<div id="2"></div>

искам когато се влезе в началната страница, потребителите да виждат div #1, а когато се кликне с мишката върху него да се сменят с див 2.
И след това когато е активен #2, при натискане на дива да с смени на #1.

Дано е станало ясно, мисля че с javascript ще е нещо, но си нямам много понятие.

 

[Hous]

Май не е точно това което искаш но все пак мисля,че ще помогне:

<style>
.className1 { color:red; }
.className2 { color:green; }
</style>

</head>
<body>

<div id="hi" onclick="this.className='className1';">a</div>
<div id="hi2" onclick="hi.className='className2';this.className='classname1';">b</div>

 

[voTkaPoweR]

[js]$(function () {

$("#1").click(function () {

$('#1').replaceWith("<div id="2"></div>");

});

});[/js]

<div id="1"></div>

 

[rivo]

Идеята е тези 2 дива да са един върху друг, размерите им да са еднакви ,обаче докато единият е видим, другия трябва да е скрит.

Добре тогава има ли начин само с 1 клик да се сменя на 2 ри див, без повече действия.

Тоест, човека влиза в страницата натиска #1, див #1 става невидим, а видим става div#2, дано така е станало ясно.


Иначе ги пробвах и 2 та начина, които дадохте. Първият работи, но не е това което търся, а вторият има грешка.

 

[voTkaPoweR]

function switch() {
$("#divdve").fadeOut();
}

<div id='divedno' onclick="switch()">sdasd</div>
<div id='divdve'>fafafafa</div>

ако ти трябва да се покаже смени fadeOut() със fadeIn();

 

[Hous]

Иначе ги пробвах и 2 та начина, които дадохте. Първият работи, но не е това което търся, а вторият има грешка.

Аз съм дал за пример да се сменя само цветът.Може да го смениш на

<html>
<head>

<style>
.className2 { visibility:visible; }
.className3 { visibility:hidden; }
</style>

</head>
<body>

<div onclick="hi.className='className2';this.className='className3';">1vi div</div>
<div id="hi" class="className3">vtori div</div>

</body>

при клик на 1vi div се скрива и се появава vtori div , без ИЗЛИШЕН javascript и само 2 реда css
тествано

 

[voTkaPoweR]

@Hous

.... hi.className='className2';this.className='className3 ...

това хич не е JS

 

[Hous]

js е но имах в предвид,че не е във отделен файл или таг :lol:

 

[rivo]

Айде няма да ви занимавам повече, бих дал точка и на 2 мата, но няма как,

ще е там все пак на Hous, защото с неговия пример почти го нагласих.

Благодаря и на 2 мата.

 

[eddyy93]

Здравей,

Защо не го направиш само с CSS .. дори и по-добре ще стане.

#div {width: 200px; height: 200px; background: url('snimka.jpg') no-repeat;}
#div a:hover {width: 200px; height: 200px; background: url('snimka_2.jpg') no-repeat;}

HTML:

<div id="div"><a href="#">TEKST</a></div>

 

[mimzity]

Здравей,

Защо не го направиш само с CSS .. дори и по-добре ще стане.

#div {width: 200px; height: 200px; background: url('snimka.jpg') no-repeat;}
#div a:hover {width: 200px; height: 200px; background: url('snimka_2.jpg') no-repeat;}

HTML:

<div id="div"><a href="#">TEKST</a></div>

Защото тои не иска hover ефект а при кликане за това на Хоус е най-добре и най-елементарно и според мен :?: