runyugin,
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex">
<style class="cp-pen-styles">html{
background: rgb(101, 92, 137);
font-family: "Lato", sans-serif;
}
a:active,a:focus {
outline: expression(hideFocus='true');
}
p {
margin-bottom: 20px;
}
#wrapper {
width: 960px;
margin: 0 auto;
margin-top: 100px;
}
#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {
width: 500px;
margin: 0 auto;
margin-bottom: 40px;
}
#tabs li,#tabs2 li,#tabs3 li,#tabs4 li,#tabs5 li {
float: left;
margin-right: 2px;
list-style: none;
}
#tabs li a,#tabs2 li a,#tabs3 li a,#tabs4 li a,#tabs5 li a {
display: block;
padding: 17px 30px;
background: #544f6b;
text-decoration: none;
color: #8478B3;
}
#tabs li a:hover,#tabs2 li a:hover,#tabs3 li a:hover,#tabs4 li a:hover,#tabs5 li a:hover {
background: rgb(78, 74, 99);
}
#tabs_container {
padding: 40px;
overflow: hidden;
position: relative;
background: white;
}
#tabs_container div {
margin-right: 40px;
}
.transition {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.make_transist {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hidescale {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
filter: alpha(opacity=0);
opacity: 0;
}
.showscale {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideleft {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showleft {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideup {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showup {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideflip {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: rotatey(-90deg) scale(1.1);
-moz-transform: rotatey(-90deg) scale(1.1);
-o-transform: rotatey(-90deg) scale(1.1);
-ms-transform: rotatey(-90deg) scale(1.1);
transform: rotatey(-90deg) scale(1.1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.showflip {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
-webkit-transform: rotatey(0deg) scale(1);
-moz-transform: rotatey(0deg) scale(1);
-o-transform: rotatey(0deg) scale(1);
-ms-transform: rotatey(0deg) scale(1);
transform: rotatey(0deg) scale(1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.tabulous_active {
background: white !important;
color: #655c89 !important;
}
.tabulousclear {
display: block;
clear: both;
}</style></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function($) {
$.fn.tabulous = function(options) {
var settings = $.extend({
effect: "scale"
}, options);
return this.each(function() {
var parent = $(this),
ul = $(">ul", parent),
links = $(">li a", ul),
block = $("> div", parent),
divs = $("> div", block),
hide = "hide" + settings.effect,
show = "show" + settings.effect;
ul.append('<span class="tabulousclear"></span>');
divs.css({
"position": "absolute",
"top": "40px"
}).addClass("make_transist");
block.addClass("transition");
links.each(function(indx, a) {
var a = $(a);
a.on("click", function(event) {
event.preventDefault();
links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
var div = divs.eq(indx);
divs.removeClass(show).not(div.addClass(show)).addClass(hide);
block.height(div.height())
})
}).eq(0).click()
})
}
})(jQuery);
</script>
<div id="wrapper">
<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo</p>
<div>Пролмй блок 1</div>
<div>Пролмй блок 2
<a href="#" title="">Промная ссылка 1</a>
</div>
<div>
<div>Пролмй блок 3 <a href="#" title="">Промная ссылка 2</a></div>
</div>
<p>Aenean tempor ullamcorper leo.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis</p>
<p> Vestibulum non ante</p>
</div>
</div>
</div>
<div id="tabs2">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit arcu</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend</p>
</div>
</div>
</div>
<div id="tabs3">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit arcu</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis</p>
</div>
</div>
</div>
<div id="tabs4">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis.
</p>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#tabs').tabulous({ effect: 'scale' });
$('#tabs2').tabulous({ effect: 'left' });
$('#tabs3').tabulous({ effect: 'up' });
$('#tabs4').tabulous({ effect: 'flip' });
});
</script>
</body></html>
