Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.02.2015, 01:57
Аспирант
Отправить личное сообщение для maximamus Посмотреть профиль Найти все сообщения от maximamus
 
Регистрация: 29.01.2015
Сообщений: 81

смещение блоков при клике
про табы наверное знают все - клик на таб и появляется инфа
так вот, хочу сделать одну фишку, но с чего начать не имею малейшего понятия..

в чем суть - активный там всегда по центру, когда кликаешь на левый или правый таб, он становится активным и перемещается в центр, а тот что в центре был перемещается на место "кликнутого"

подскажите пожалуйста, как эту мысль реализовать, или хотя бы где капнуть информацию
Ответить с цитированием
  #2 (permalink)  
Старый 03.02.2015, 02:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

maximamus,
http://alexchizhov.com/pwstabs/
Ответить с цитированием
  #3 (permalink)  
Старый 03.02.2015, 02:14
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

рони, что-то я тебя не узнаю 35кб скриптов + jQuery ради одних табов
Ответить с цитированием
  #4 (permalink)  
Старый 03.02.2015, 02:16
Аспирант
Отправить личное сообщение для maximamus Посмотреть профиль Найти все сообщения от maximamus
 
Регистрация: 29.01.2015
Сообщений: 81

куча табов, а то что нужно нету)
Ответить с цитированием
  #5 (permalink)  
Старый 03.02.2015, 02:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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

maximamus,
http://jsfiddle.net/vlasenkofedor/jLprM/
http://jsfiddle.net/vlasenkofedor/82kSU/
Ответить с цитированием
  #7 (permalink)  
Старый 03.02.2015, 02:35
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Кстати, случайно узнал что Array.apply не работает Firefox 3.6 - древность, но все же обидно
Цитата:
second argument to Function.prototype.apply must be an array
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 03.02.2015, 02:36
Аспирант
Отправить личное сообщение для maximamus Посмотреть профиль Найти все сообщения от maximamus
 
Регистрация: 29.01.2015
Сообщений: 81

ооот .. елки ж))
еще раз попытаюсь обьяснить, что нужно

активный таб ВСЕГДА должен находится по центру
то есть таб1 - таб2(активный) - таб3

когда кликаем на третий, допустим, таб, то второй, что был активным, переходит на место третьего

меняются сами заголовки таба

думаю уловите мысль
Ответить с цитированием
  #9 (permalink)  
Старый 03.02.2015, 03:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

maximamus,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div  {
     width: 200px;
     height: 100px;
     position:  absolute;
  }
  .tab1 {
    background: #FFCC00;
    left : 0
  }
  .tab2{
    background: #66CC66;
    left: 200px;
  }
  .tab3 {
     background: #3399CC;
     left: 400px;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var div = $("div"), temp = div[1];
       div.click(function() {
         var left = $(this).css("left");
         $(this).stop().animate({left: 200},1500);
         $(temp).stop().animate({left: left},1500);
         temp = this;
      });
});


  </script>
</head>

<body>
    <div class='tab1'></div>
    <div class='tab2'></div>
    <div class='tab3'></div>
</body>

</html>
Ответить с цитированием
  #10 (permalink)  
Старый 03.02.2015, 03:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103


<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
     display: flex;
  }

  div  {
     width: 200px;
     height: 100px;
     overflow: hidden;
     margin: 0;
  }
  .tab1 {
    background: #FFCC00;
    width: 20px;
  }
  .tab2{
    background: #66CC66;
  }
  .tab3 {
     background: #3399CC;
     width: 20px;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var div = $("div"), temp = div[1];
       div.click(function() {
         var left = $(this).css("left");
         $(this).stop().animate({width: 200},1500);
         $(temp).not(this).stop().animate({width: 20},1500);
         temp = this;
      });
});


  </script>
</head>

<body>
    <div class='tab1'></div>
    <div class='tab2'></div>
    <div class='tab3'></div>
</body>

</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
fancybox смещение страницы вверх при клике по ссылке spo jQuery 13 19.05.2015 18:56
Изменение размера элемента при клике Derekovich Элементы интерфейса 25 05.12.2013 20:45
Смена фона картинки при клике на иконку Letto Элементы интерфейса 2 08.11.2013 18:31
Изменить цвет при клике AndreyS jQuery 3 07.10.2012 16:27
Запись cookes при клике pavdin Общие вопросы Javascript 3 06.02.2012 17:19