скрыть открыть тот или иной блок при клике на ссылке

[ufaclub]

Есть группа ссылок

<a class="dom1" href="#">Дом 1</a>
<a class="dom2" href="#">Дом 2</a>
<a class="dom3" href="#">Дом 3</a>


Нужно по клику чтобы отображались только строки с тем классом что указаны в ссылке

Например при клике на ссылку a.dom1 чтобы строки tr.doms1 стали видимы.

Но при следующем клике например a.dom2 снова строки tr.doms1 стали скрыты а отрылись только строки doms2...

Ну тоесть чтобы при любом клике была открыта только одна группа строк.

Ну и при клики повторном блок не закрывался, а закрывался только по клику на другую ссылку.

Грубо говоря аналог табов. (Только без привязки к структуре кода html)

<table>

<tr><td style="display:none" class="doms1">Данные о доме 1</td></tr>
<tr><td style="display:none" class="doms1">Данные о доме 1</td></tr>


<tr><td style="display:none" class="doms2">Данные о доме 2</td></tr>
<tr><td style="display:none" class="doms2">Данные о доме 2</td></tr>

<tr><td style="display:none" class="doms3">Данные о доме 3</td></tr>
<tr><td style="display:none" class="doms3">Данные о доме 3</td></tr>

</table>

[skrudjmakdak]

может это конечно не мое дело, но вы здесь сидите не один год, по крайней мере зарегистрировались очень давно и до сих пор не можете научиться решать элементарные задачи?

[Rise]

ufaclub, с jquery так можно:

<style>
tr.dom1,tr.dom2,tr.dom3{display:none;}
</style>

<a class="dom1" href="#">Дом 1</a>
<a class="dom2" href="#">Дом 2</a>
<a class="dom3" href="#">Дом 3</a>

<table>

<tr class="dom1"><td>Данные о доме 1</td></tr>
<tr class="dom1"><td>Данные о доме 1</td></tr>

<tr class="dom2"><td>Данные о доме 2</td></tr>
<tr class="dom2"><td>Данные о доме 2</td></tr>

<tr class="dom3"><td>Данные о доме 3</td></tr>
<tr class="dom3"><td>Данные о доме 3</td></tr>

</table>

<script>
$(function(){
	$('a.dom1,a.dom2,a.dom3').click({x:0},function(e){
		e.preventDefault();
		if (this != e.data.x) {
			if (e.data.x) $('tr.' + e.data.x.className).hide();
			$('tr.' + this.className).show();
			e.data.x = this;
		}
	});
});
</script>

[ufaclub]

а как присвоить класс активной ссылке которая открыла текущий див

например чтобы было <a id="active" class="dom1" href="#">Дом 1</a>

когда кликнеш по ссылке <a class="dom1" href="#">

[Rise]

ufaclub,

$(function(){
    $('a.dom1,a.dom2,a.dom3').click({x:0},function(e){
        e.preventDefault();
        if (this != e.data.x) {
            if (e.data.x) {
                    $(e.data.x).removeClass('active');
                    $('tr.' + e.data.x.className).hide();
            }                
            $('tr.' + this.className).show();
            $(this).addClass('active');
            e.data.x = this;
        }
    });
});

[ufaclub]

Спасибо!

[Vlasenko Fedor]

Решение этой задачи без jQuery для наглядности

[ufaclub]

$(function(){
    $('a.dom1,a.dom2,a.dom3').click({x:0},function(e){
        e.preventDefault();
        if (this != e.data.x) {
            if (e.data.x) {
                    $(e.data.x).removeClass('active');
                    $('tr.' + e.data.x.className).hide();
            }                
            $('tr.' + this.className).show();
            $(this).addClass('active');
            e.data.x = this;
        }
    });
});

А как сделать чтобы по умолчанию был открыт блок tr.dom1 и у a.a.dom1 был сlass = "active"

[Rise]

ufaclub,

$('a.dom1').trigger('click');

[ufaclub]

$('a.dom1').trigger('click');

а куда это вставить именно?