Форум программистов, компьютерный форум, киберфорум
Наши страницы
and_y87
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 1.

Создание блока вкладок.

Запись от and_y87 размещена 07.07.2014 в 18:45
Обновил(-а) and_y87 20.10.2014 в 12:42

Нормальные вкладки на jQuery - 1 скрипт на всё.

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

CSS
1
.none { display: none; }
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="blokc__tabs">
 
    <div class="b-tabs__header">
        <a class="b-tabs__link" href="#first"> первый </a> |
        <a class="b-tabs__link" href="#next"> следующий </a> |
        <a class="b-tabs__link" href="#last"> последний  </a> |
        <a class="b-tabs__link" href="#more"> ещё  </a>
    </div>
 
    <div class="b-tabs__body">
        <div class="b-tabs__part " id="first">
            блок первый
        </div>
        <div class="b-tabs__part none" id="next">
            блок следующий
        </div>
        <div class="b-tabs__part none" id="last">
            блок последний
        </div>
    </div>
 
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).delegate(
  '.b-tabs__link',
  'click',
  function(e)
  {
      e.preventDefault();
      var cls = $(this).attr('href'),
          obj = $( cls );
 
      if ( obj.length == 0 )
      {
          alert( 'Блок ' + cls + ' не найден' );
          return false;
      }
      else
      {
          $('.b-tabs__part').removeClass('none').addClass('none');
          obj.removeClass('none');
      }
  }
);
Рабочий пример

Буду рад конструктивным комментариям и мыслям.
Всего комментариев 1
Комментарии
  1. Старый комментарий
    Аватар для and_y87
    Много топиков создаётся на эту тему.
    Так что, думаю, как один из вариантов решения посылать на этот пост буду...
    Запись от and_y87 размещена 07.07.2014 в 20:02 and_y87 вне форума
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru