Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.97/37: Рейтинг темы: голосов - 37, средняя оценка - 4.97
Oleg89g
0 / 0 / 1
Регистрация: 10.04.2013
Сообщений: 10
1

Блоки появляются и исчезают при клике

15.05.2013, 14:18. Просмотров 6790. Ответов 2
Метки нет (Все метки)

Здравствуйте! Помогите пожалуйста! У меня такая задача, не могу решить, есть определенние ссылки (например 5 штук), для первой ссылки есть на сайте блок с информацией (блок отдельно от ссылки), но при нажатии на другую ссылку, первый блок должен закрытся и открится новый блок для ссылки на которую мы нажали, так для всех ссылок надо сделать, как такое сделать с помощю jquery? Может есть универсальний код для всех ссылок?

Добавлено через 55 минут
Забыл добавить, что новый блок должен появится на том же месте где был предыдущий, тоесть есть блок в котором появляется разная информация при клике на ссылки.
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.05.2013, 14:18
Ответы с готовыми решениями:

Переход на блоки при клике
Подскажите готовый jQuery скрипт, который при клике на путнк меню переходил на...

Имеются блоки, в них имеются еще по блоку. Нужно чтобы при клике на первый раскрывался дочерний
Допустим разметка (не исключаю что не она может не подойти): <div...

При первом клике одно действие, при втором клике другое действие
Есть кнопка, при первом нажатии добавляется файл-css на страницу (как это...

Сделать, чтобы при клике на кнопке, блок #cont исчез, а при повторном клике блок #cont появился
Как сделать, чтобы при клике на кнопке, блок #cont исчез, а при повторном клике...

Нужно, чтобы при клике на #button фокусировался #one, при втором клике на #button фокусировался #two
$(function() { $("#button").click(function(){ $("#one").focus(); }); Это...

2
Forastero
543 / 325 / 82
Регистрация: 15.05.2013
Сообщений: 792
Записей в блоге: 1
16.05.2013, 00:00 2
Лучший ответ Сообщение было отмечено Oleg89g как решение

Решение

Уфф... что-то набросал я тут. Код не оптимизирован, да и не уверен я, что это вообще годится для применения на сайте, но все же вот, работает.))

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <ul>
    <li><a href="#" class="link01">Click me 01</a></li>
    <li><a href="#" class="link02">Click me 02</a></li>
    <li><a href="#" class="link03">Click me 03</a></li>
  </ul>
  
  <div class="div01">Блок номер 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita rerum ullam amet ipsam officiis voluptate dolores illo architecto unde omnis quia nesciunt harum a et cumque nam temporibus blanditiis.</div>
  <div class="div02">Блок номер 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore omnis id rem quas recusandae commodi fugit alias voluptatem ipsam adipisci. Illum voluptatibus minus earum odio sint nostrum itaque tenetur expedita!</div>
  <div class="div03">Блок номер 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi molestiae illum aut accusantium rerum et reprehenderit officiis distinctio dolor laboriosam. Quas adipisci quia corporis possimus voluptatem saepe maiores in suscipit.</div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
li{
  list-style:none;
  line-height: 28px;
}
 
a{
  text-decoration: none;
  color:#fff;
  background: #ccc;
  font-weight:700;
  padding:3px 5px;
}
 
div[class^=div]{
    width:400px;
    min-width: 400px;
  padding:10px;
  box-sizing:border-box;
  display: none;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function() {
    $('a[class^=link]').on('click', function () {
        function clear () {
            $('div[class^=div]').css({
                display : 'none'
            });
        }
        var $class = $(this).attr('class');
        if($class == 'link01'){
            clear();
            $('.div01').toggle('drop');
        } else if($class == 'link02'){
            clear();
            $('.div02').toggle('drop');
        } else if($class == 'link03'){
            clear();
            $('.div03').toggle('drop');
        };
    });
});
http://jsbin.com/ududoz/3/
0
Oleg89g
0 / 0 / 1
Регистрация: 10.04.2013
Сообщений: 10
17.05.2013, 14:42  [ТС] 3
Большое спасибо! Вы очень помогли мне! Только извините за наглость, я тут к первому вопросу имею еще одну задачу, думал справлюсь сам но увы. Эти ссылки я сделал как картинки и сделал чтоб они были слайдером-каруселью, слайдер я взял вот этот http://sroucheray.org/blog/jquery-plugins/jquery-infinite-carousel/ прописал его на странице, и ваш код мне помог, когда я нажымаю на картинку появляется блок с информацией, НО возникла следующая проблема, когда я кручу этот слайдер и нажымаю на ссылки то они уже не работают и блок с информацыей не появляется( Как можно исправить проблему? Может слайдер плохой, я пробовал с другим и та же самая проблема

Добавлено через 19 часов 40 минут
При повторном нажатии на ту же самую ссылку снова срабатывает toggle('drop'), а можно как-то запретить это, то есть чтоб при повторном нажатии на ссылку текст оставался неизменным и небыло анимации?
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
17.05.2013, 14:42

При ajax запросе исчезают данные сессий
При посылке Ajax запроса, PHP-обрабтчик показывает, что данные из сессии с...

Возврат прошлого стиля при при клике
Здравствуйте, имеем стиль к тегу &lt;p&gt; &lt;p style=&quot;color:#23a0ca;...

Как сделать так, чтобы при клике по чекбоксу, выбранная категория отображалась, а остальные при этом скрывались
Всем доброго времени. Прошу помочь со следующей задачей. Пишу вот такой код,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru