|
смещение блоков при клике
про табы наверное знают все - клик на таб и появляется инфа
так вот, хочу сделать одну фишку, но с чего начать не имею малейшего понятия.. в чем суть - активный там всегда по центру, когда кликаешь на левый или правый таб, он становится активным и перемещается в центр, а тот что в центре был перемещается на место "кликнутого" подскажите пожалуйста, как эту мысль реализовать, или хотя бы где капнуть информацию |
maximamus,
http://alexchizhov.com/pwstabs/ |
рони, что-то я тебя не узнаю 35кб скриптов + jQuery ради одних табов :haha:
|
куча табов, а то что нужно нету)
|
Poznakomlus,
:-? |
|
Кстати, случайно узнал что Array.apply не работает Firefox 3.6 - древность, но все же обидно :(
Цитата:
|
ооот .. елки ж))
еще раз попытаюсь обьяснить, что нужно активный таб ВСЕГДА должен находится по центру то есть таб1 - таб2(активный) - таб3 когда кликаем на третий, допустим, таб, то второй, что был активным, переходит на место третьего меняются сами заголовки таба думаю уловите мысль |
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> |
:)
<!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> |
Часовой пояс GMT +3, время: 10:32. |
|