Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   скрыть открыть тот или иной блок при клике на ссылке (https://javascript.ru/forum/jquery/49605-skryt-otkryt-tot-ili-inojj-blok-pri-klike-na-ssylke.html)

ufaclub 20.08.2014 21:31

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

<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 21.08.2014 08:33

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

Rise 21.08.2014 08:37

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 23.08.2014 17:19

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

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

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

Rise 23.08.2014 17:41

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 23.08.2014 19:21

Спасибо!

Vlasenko Fedor 23.08.2014 23:46

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

ufaclub 25.08.2014 01:27

Цитата:

Сообщение от Rise (Сообщение 327192)
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 25.08.2014 11:58

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

ufaclub 26.08.2014 00:14

Цитата:

Сообщение от Rise (Сообщение 327356)
ufaclub,
$('a.dom1').trigger('click');

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


Часовой пояс GMT +3, время: 10:25.