Html5导航插件，支持水平/垂直展示

/*========================= CSS STYLE=========================== */

.tabWrap {
}
.tabWrap ul {
padding:0;
margin:0;
position:relative;
}
.tabWrap li {
padding:0;
margin:0;
list-style:none;
}
.tabWrap .tabTriggerUL {
display:table;
width:100%;
}
.tabWrap .tabTriggerLI {
display:table-cell;
padding:5px 20px 2px 20px;
text-align:center;
vertical-align:middle;
}
.tabWrap .tabTriggerA {
text-decoration:none;
display:block;
}
.tabWrap .tabContentUL {
display:block;
border:solid 1px;
position:relative;
overflow:hidden;
}
.tabWrap .tabContentLI {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
padding:20px;
position:absolute;
visibility:hidden;
z-index:1;
top:0;
left:0;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.tabWrap .showTab {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
visibility: visible;
z-index: 2;
}
.tabTreatment1 {
width:625px;
}
.tabTreatment1 .tabTriggerLI {
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 5px;
-moz-border-top-right-radius: 5px;
-moz-border-bottom-right-radius: 0;
-moz-border-bottom-left-radius: 0;
-moz-border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 5px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
background:blue;
border:solid 1px #444;
background:#fffbfb;
background:blue;
background:-moz-linear-gradient(top,#fffbfb 0%,#fff9f9 6%,#ffebeb 25%,#fee8e8 25%,#fee4e4 32%,#fee1e1 33%,
#fed5d5 50%,#fdc6c7 51%,#fcbebf 66%,#fdaaab 92%,#fda7a8 100%);
background:-webkit-linear-gradient(top,#fffbfb 0%,#fff9f9 6%,#ffebeb 25%,#fee8e8 25%,#fee4e4 32%,#fee1e1 33%,
#fed5d5 50%,#fdc6c7 51%,#fcbebf 66%,#fdaaab 92%,#fda7a8 100%);
background:-ms-linear-gradient(top,#fffbfb 0%,#fff9f9 6%,#ffebeb 25%,#fee8e8 25%,#fee4e4 32%,#fee1e1 33%,
#fed5d5 50%,#fdc6c7 51%,#fcbebf 66%,#fdaaab 92%,#fda7a8 100%);
background:-o-linear-gradient(top,#fffbfb 0%,#fff9f9 6%,#ffebeb 25%,#fee8e8 25%,#fee4e4 32%,#fee1e1 33%,
#fed5d5 50%,#fdc6c7 51%,#fcbebf 66%,#fdaaab 92%,#fda7a8 100%);
background:linear-gradient(top,#fffbfb 0%,#fff9f9 6%,#ffebeb 25%,#fee8e8 25%,#fee4e4 32%,#fee1e1 33%,
#fed5d5 50%,#fdc6c7 51%,#fcbebf 66%,#fdaaab 92%,#fda7a8 100%);
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fffbfb',endColorstr='#fda7a8',GradientType=0);
}
.tabTreatment1 .activeTab {
border-bottom:none;
background:#fffbfb;
background:-moz-linear-gradient(top,#fffbfb 0%,#fff9f9 6%,#ffebeb 25%,#fee8e8 25%,#fee4e4 32%,#fee1e1 33%,
#fed5d5 50%,#fcd4d4 51%,#fcfcfc 100%);
background:-webkit-linear-gradient(top,#fffbfb 0%,#fff9f9 6%,#ffebeb 25%,#fee8e8 25%,#fee4e4 32%,#fee1e1 33%,
#fed5d5 50%,#fcd4d4 51%,#fcfcfc 100%);
background:-ms-linear-gradient(top,#fffbfb 0%,#fff9f9 6%,#ffebeb 25%,#fee8e8 25%,#fee4e4 32%,#fee1e1 33%,
#fed5d5 50%,#fcd4d4 51%,#fcfcfc 100%);
background:-o-linear-gradient(top,#fffbfb 0%,#fff9f9 6%,#ffebeb 25%,#fee8e8 25%,#fee4e4 32%,#fee1e1 33%,
#fed5d5 50%,#fcd4d4 51%,#fcfcfc 100%);
background:linear-gradient(top,#fffbfb 0%,#fff9f9 6%,#ffebeb 25%,#fee8e8 25%,#fee4e4 32%,#fee1e1 33%,
#fed5d5 50%,#fcd4d4 51%,#fcfcfc 100%);
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fffbfb',endColorstr='#fcfcfc',GradientType=0);
}
.tabTreatment1 .tabTriggerA {
color:#222;
}
.tabTreatment1 .tabContentUL {
border: solid 1px #444;
border-top: none;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-top-left-radius: 0;
-moz-border-top-right-radius: 0;
-moz-border-bottom-right-radius: 3px;
-moz-border-bottom-left-radius: 3px;
-moz-border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 3px 0 rgba(0,0,0,.4);
box-shadow: 0 3px 3px 0 rgba(0,0,0,.4);
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
/*垂直效果*/
.tabTreatment2 {
width: 605px;
overflow: hidden;
padding: 10px;
background: #45484d;
background: -moz-linear-gradient(top,#45484d 0%,#000 100%);
background: -webkit-linear-gradient(top,#45484d 0%,#000 100%);
background: -ms-linear-gradient(top,#45484d 0%,#000 100%);
background: -o-linear-gradient(top,#45484d 0%,#000 100%);
background: linear-gradient(top,#45484d 0%,#000 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#45484d',endColorstr='#000',GradientType=0);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.tabTreatment2 .tabTriggerUL {
display: block;
width: 150px;
float: left;
height: 100%;
margin-right: 10px;
}
.tabTreatment2 .tabTriggerLI {
padding: 10px;
text-align: center;
position: relative;
display: block;
margin: 4px 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0 0 3px rgba(255,255,255,.7);
-moz-box-shadow: 0 0 3px rgba(255,255,255,.7);
box-shadow: 0 0 3px rgba(255,255,255,.7);
background: -moz-linear-gradient(top,#7d7e7d 0%,#0e0e0e 100%);
background: -webkit-linear-gradient(top,#7d7e7d 0%,#0e0e0e 100%);
background: -ms-linear-gradient(top,#7d7e7d 0%,#0e0e0e 100%);
background: -o-linear-gradient(top,#7d7e7d 0%,#0e0e0e 100%);
background: linear-gradient(top,#7d7e7d 0%,#0e0e0e 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#7d7e7d',endColorstr='#0e0e0e',GradientType=0);
}
.tabTreatment2 .tabTriggerA {
text-decoration:none;
display:block;
color:#fff;
position:relative;
top:50%;
}
.tabTreatment2 .tabContentUL {
display: block;
border: solid 1px #999;
position: relative;
overflow: hidden;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.tabTreatment2 .tabContentLI {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,.6);
-moz-box-shadow: inset 2px 2px 3px rgba(0,0,0,.6);
box-shadow: inset 2px 2px 3px rgba(0,0,0,.6);
position:absolute;
visibility:hidden;
top:0;
left:0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index:1;
background:#fff;
background: -moz-linear-gradient(top,#fff 0%,#f6f6f5 47%, #ededed 100%);
background: -webkit-linear-gradient(top,#fff 0%,#f6f6f5 47%, #ededed 100%);
background: -ms-linear-gradient(top,#fff 0%,#f6f6f5 47%, #ededed 100%);
background: -o-linear-gradient(top,#fff 0%,#f6f6f5 47%, #ededed 100%);
background: linear-gradient(top,#fff 0%,#f6f6f5 47%, #ededed 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff',endColorstr='#ededed',GradientType=0);
}
.tabTreatment2 .showTab {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
z-index:2;
visibility:visible;
}
.tabTreatment2 .activeTab {
background:#444;
background: -moz-linear-gradient(top,#444 0%, #9e9e9e 100%);
background: -webkit-linear-gradient(top,#444 0%, #9e9e9e 100%);
background: -ms-linear-gradient(top,#444 0%, #9e9e9e 100%);
background: -o-linear-gradient(top,#444 0%, #9e9e9e 100%);
background: linear-gradient(top,#444 0%, #9e9e9e 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#444',endColorstr='#9e9e9e',GradientType=0);
}

/*=========================== HTML CODE=================================== */

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)| !(IE) ]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title></title>
<meta name="description" content="" />
<!--移动 viewport 优化：h5bp.com/viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--放置 favicon.ico和apple-touch-icon.png到根目录directory:mathiasbynens.be/notes/touch-icons -->
<link rel="stylesheet" href="css/1140.min.css" />
<link rel="stylesheet" href="css/style.css" />
<!--更多关于<head>的信息：h5bp.com/d/head-Tips -->
<!--除了Modernizr build,其他的JS都被放在末尾。Modernizr 支持HTML5元素，并且对高级别浏览器使用性能更加好的特性
创建你自己的Modernizr build:www.modernizr.com/download/ -->
<script type="text/javascript" src="js/modernizr-3.3.1.min.js"></script>
<!--[if gte IE9]><style type="text/css">.gradient{filter:none}</style><![endif]-->
</head>
<body>
<section data-item="tab" class="tabWrap tabTreatment2" id="tabID">
<ul class="tabTriggerUL">
<li class="tabTriggerLI activeTab">
<a href="#tab1" class="tabTriggerA">This is a Tab</a>
</li>
<li class="tabTriggerLI">
<a href="#tab2" class="tabTriggerA">The Triger for a <br/> Long Tab Two</a>
</li>
<li class="tabTriggerLI">
<a href="#tab3" class="tabTriggerA">Don't Forget Me</a>
</li>
<li class="tabTriggerLI">
<a href="#tab4" class="tabTriggerA">I Like Being a Tab</a>
</li>
</ul>
<ul class="tabContentUL" style="height:215px;">
<li class="tabContentLI showTab" data-tabid="#tab1">
<p>
Skateboard banh mi direct trade fanny pack mixtape,pork belly art party.
Dreamcatcher wes anderson raw denim kogi gastropub.
</p>
<p>
Thundercats ennui carles iphone,pour-over photo booth quinoa leggings stumptown PBR fanny pack cliche gluten-free.
</p>
<p>
Small batch tofu gluten-free,vinyl you probably haven't heard of them typewriter umami viral DIY four loko aesthetic.
</p>
</li>
<li class="tabContentLI" data-tabid="#tab2">
<p>
Carles viral yr,williamsburg letterpress ethnic gluten-free aesthetic american apparel ennui
chambray polaroid you probably haven't heard of them.
</p>
<p>
Scenester hoodie tattooed food truck tofu,selvage blog sriracha polaroid hella keytar before
they sold out +1.
</p>
</li>
<li class="tabContentLI" data-tabid="#tab3">
<p>
Hella 8-bit viral master cleanse salvia shoreditch. Leggings banksy mustache,godard VHS truffaut mixtape ethnic umami
gluten-free occupy chips skatboard mcsweeney's small batch.
</p>
<p>
Swag carles terry richardson,chillwave sustainable pickled high life keffiyeh single-origin coffee fanny pack kogi.
</p>
<p>
Carles farm-to-table stumptown,pitchfork williamsburg wes anderson whatever sartorial.You probably haven't heard of them kogi kale chips,
gluten-free scenester
leggings pitchfork authentic next level raw denim mcsweeney's dreamcatcher umami.
</p>
</li>
<li class="tabContentLI" data-tabid="#tab4">
<p>
Swag carles terry richardson,chillwave sustainable pickled high life keffiyeh
single-origin coffee fanny pack kogi.
</p>
<p>
Carles farm-to-table stumptown,pitchfork williamsburg wes anderson whatever
sartorial. You probably haven't heard of them kogi kale chips,gluten-free scenester
leggings pitchfork authentic next level raw denim mcsweeney's dreamcatchar umami.
</p>
</li>
</ul>
</section>

<!--将js放在页面底部，是为了更快加载出页面主体-->
<!--从Google CDN上获取jQuery,如果没有获取到，用本地的文件代替-->
<script type="text/javascript" src="js/lib/jquery.min.js"></script>

<!--脚本被合并和压缩-->
<script type="text/javascript" src="js/plugins-tab.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--脚本加载结束-->
<!--加Google统计脚本，将UA-XXXX-X 换成你网站的实际ID。
mathiasbynens.be/notes/async-analytics-snippet -->
<script type="text/javascript">
$('#tabID').tab();
</script>
</body>
</html>

/*=================================Javascript CODE=======================================*/

(function ($) {
$.fn.extend({
// our plugin name
tab: function () {
return this.each(function () {
// define var
var tab = $(this), hash = window.location.has,
// search .tabContentUL.
tabContentUL = tab.find('.tabContentUL'),
tabContentLIs=tabContentUL.find('.tabContentLI'),
// search all .tabTriggerA;
tabTriggers = tab.find('.tabTriggerA'), tabTriggerLIs = tab.find('.tabTriggerLI');
// if URL contains mot
if (hash) {
var count = 0;
tabTriggers.each(function checkHash() {
var t = $(this);
if (t.attr('href') === hash) {
t.parents('.tabTriggerLI').addClass('activeTab');
var currentTab = findTabContentLI(hash);
currentTab.addClass('showTab');
tabContentUL.height(currentTab.outerHeight(true));
} else {
count++;
}
});
//
if (count === tabTriggers.length) {
showFirstTab();
}
} else {
showFirstTab();
}
//binding tabTrigger click
$(this).find('.tabTriggerA').click(function tabTrigger() {
//get clicked .tabTriggerA
var t = $(this);
tabId = t.attr('href'),
targetContentTab = findTabContentLI(tabId);
// remove class:showTab
tabContentLIs.removeClass('showTab');
// remove all class:activeTab
tabTriggerLIs.removeClass('activeTab');
//Add class:activeTab to clicked .tabTriggerA's parent element .tabTriggerLI
//
t.parents('.tabTriggerLI').addClass('activeTab');
//
if (Modernizr.cssanimations) {
tabContentUL.height(targetContentTab.outerHeight(true));
targetContentTab.addClass('showTab');
} else {
tabContentUL.animate({
'height': targetContentTab.outerHeight() + 'px'
}, 300, function showTab() {
targetContentTab.addClass('showTab');
});
}
});
//
if ($('html').hasClass('ie')) {
equalizeTriggerHeights();
}
// find the heightest triggerLI
function equalizeTriggerHeights() {
var maxHeight = 0;
tabTriggerLIs.each(function () {
var t = $(this);
var tHeight = t.height();
if (tHeight > maxHeight) {
maxHeight = tHeight;
}
//
if (!$('html').hasClass('ie7')) {
var tabTrigger = t.find('.tabTriggerA');
tabTrigger.css('margin-top', -(tabTrigger.outerHeight() / 2));
} else {
t.find('.tabTriggerA').css('position', 'static');
setTimeout(function () { ie7Fix(); }, 100);
}
});
tabTriggerLIs.height(maxHeight);
}
function ie7Fix() {
var showTab = tab.find('.showTab');
showTab.css('display', 'block');
tab.find('.tabContentUL').height(showTab.outerHeight(true));
}
//
function findTabContentLI(selector) {
selectedTabContent = tabContentUL.find('.tabContentLI[data-tabid="' + selector + '"]');
return selectedTabContent;
}
// show first tab
function showFirstTab() {
var currentTab = tabContentLIs.eq(0);
currentTab.addClass('showTab');
tabContentUL.height(currentTab.outerHeight(true));
tabTriggers.eq(0).parents('.tabTriggerLI').addClass('activeTab');
}
});
}
});

})(jQuery);