|

20.08.2014, 20:31
|
Профессор
|
|
Регистрация: 27.11.2010
Сообщений: 201
|
|
скрыть открыть тот или иной блок при клике на ссылке
Есть группа ссылок
<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>
|
|

21.08.2014, 07:33
|
Профессор
|
|
Регистрация: 27.04.2012
Сообщений: 1,410
|
|
может это конечно не мое дело, но вы здесь сидите не один год, по крайней мере зарегистрировались очень давно и до сих пор не можете научиться решать элементарные задачи?
|
|

21.08.2014, 07:37
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,639
|
|
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>
|
|

23.08.2014, 16:19
|
Профессор
|
|
Регистрация: 27.11.2010
Сообщений: 201
|
|
а как присвоить класс активной ссылке которая открыла текущий див
например чтобы было <a id="active" class="dom1" href="#">Дом 1</a>
когда кликнеш по ссылке <a class="dom1" href="#">
|
|

23.08.2014, 16:41
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,639
|
|
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;
}
});
});
Последний раз редактировалось Rise, 23.08.2014 в 16:49.
|
|

23.08.2014, 18:21
|
Профессор
|
|
Регистрация: 27.11.2010
Сообщений: 201
|
|
Спасибо!
|
|

23.08.2014, 22:46
|
 |
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
Последний раз редактировалось Vlasenko Fedor, 23.08.2014 в 23:05.
|
|

25.08.2014, 00:27
|
Профессор
|
|
Регистрация: 27.11.2010
Сообщений: 201
|
|
Сообщение от 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;
}
});
});
|
А как сделать чтобы по умолчанию был открыт блок tr.dom1 и у a.a.dom1 был сlass = "active"
|
|

25.08.2014, 10:58
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,639
|
|
ufaclub,
$('a.dom1').trigger('click');
|
|

25.08.2014, 23:14
|
Профессор
|
|
Регистрация: 27.11.2010
Сообщений: 201
|
|
Сообщение от Rise
|
ufaclub,
$('a.dom1').trigger('click');
|
а куда это вставить именно?
|
|
|
|