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

[lub4o]

Здравейте, как ще стане примерно имам 2 дива с име "link" и в тях имам текст:

<div id="link">
текст 1
</div>
<div id="link">
текст 2
</div>

След което като цъкна на първият див да се показва "текст 1", а като натисна на втория див, да се показва текст 2 и да се скрива текст 1.

 

[palex]

id трябва да има различна стойност за различните елементи в страницата.

<div id="link1" onclick="document.getElementById('link2').style.display='';document.getElementById('link1').style.display='none';">
текст 1
</div>
<div id="link2" onclick="document.getElementById('link1').style.display='';document.getElementById('link2').style.display='none';">
текст 2
</div>

 

[lub4o]

Мерси, направих го така

<style>
#link2{
display:none;
}
#content
{
width: 200px;
height:200px;
background-color: red;
}
</style>
<script type="text/javascript">
function aroug(){
document.getElementById('link2').style.display='block';
document.getElementById('link1').style.display='none';
}
function excu(){
document.getElementById('link1').style.display='';
document.getElementById('link2').style.display='none';
}
</script>
</head>
<body>
<a href="#" onClick="excu()">click me1 </a>
<a href="#" onClick="aroug()">click me 2 </a>
<div id="content">
<div id="link1">
текст 1
текст 1
текст 1
текст 1
текст 1
текст 1
текст 1
текст 1
</div>
<div id="link2">
текст 2
текст 2
текст 2
текст 2
текст 2
текст 2
</div>
</div>

Направил съм, като се натисне на линк 1 да се показва div 1, a като кликне върху линк 2 да се показва див 2.

Обаче го направих с две функции. Има ли възможност да стане с една функция, тоест чрез проверки в едната. И за да сложа fadeIn и fadeOut ефекти, jquery ли ми трябва ?

 

[palex]

за ефектите най-лесно ще ти е с jQuery. ето и един вариант на обобщена функция

[js]<script type="text/javascript">
function divswitch(){
if (document.getElementById('link2').style=='none') {
document.getElementById('link1').style.display='none';
document.getElementById('link2').style.display='';
} else {
document.getElementById('link1').style.display='';
document.getElementById('link2').style.display='none';
}
}
</script>[/js]

<a href="#" onClick="divswitch()">click me1 </a>
<a href="#" onClick="divswitch()">click me 2 </a>

 

[lub4o]

Имаш точката.

А ако ми отговориш и на този въпрос си златен

function aroug(){
document.getElementById('link2').style.display='block';
document.getElementById('link1').style.display='none';
}
function excu(){
document.getElementById('link1').style.display='';
document.getElementById('link2').style.display='none';
}

Този по ми върши работа.
Да кажем, че с Jquery искам да направя, когато се кликне на link1 и link 2 при появата на дивовете те да са с fadeIn ефект. Аз опитах, но не ми се получи.

 

[kriss]

[js]function aroug(){
$('#link2').fadeIn();
$('#link1').fadeOut();
}
function excu(){
$('#link1').fadeIn();
$('#link2').fadeOut();
}[/js]