Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.08.2014, 21:31
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 21.08.2014, 08:33
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

может это конечно не мое дело, но вы здесь сидите не один год, по крайней мере зарегистрировались очень давно и до сих пор не можете научиться решать элементарные задачи?
Ответить с цитированием
  #3 (permalink)  
Старый 21.08.2014, 08:37
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,661

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>
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2014, 17:19
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 201

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

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

когда кликнеш по ссылке <a class="dom1" href="#">
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2014, 17:41
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,661

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 в 17:49.
Ответить с цитированием
  #6 (permalink)  
Старый 23.08.2014, 19:21
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 201

Спасибо!
Ответить с цитированием
  #7 (permalink)  
Старый 23.08.2014, 23:46
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

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

Последний раз редактировалось Vlasenko Fedor, 24.08.2014 в 00:05.
Ответить с цитированием
  #8 (permalink)  
Старый 25.08.2014, 01:27
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 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"
Ответить с цитированием
  #9 (permalink)  
Старый 25.08.2014, 11:58
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,661

ufaclub,
$('a.dom1').trigger('click');
Ответить с цитированием
  #10 (permalink)  
Старый 26.08.2014, 00:14
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 201

Сообщение от Rise Посмотреть сообщение
ufaclub,
$('a.dom1').trigger('click');
а куда это вставить именно?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 18:31
Задача такова : нужно при клике на ссылку открыть страницу с новой вкладке, оставаясь asustekk Javascript под браузер 4 25.05.2012 14:04
Текст, появляющийся в определённом месте страницы при клике по ссылке denisnb Элементы интерфейса 2 20.03.2011 07:24
Двойное действие при клике по ссылке spider Элементы интерфейса 5 10.11.2009 10:43
Смена картинки (бекграунд дива ) при событии (нажатие клавиш или клавиши и мыши) Monster Events/DOM/Window 5 01.11.2009 01:16