Tabs mit Hashchange Funktion
Beispiel für 3 Tabs auf gängigen Browsern verlink- und bookmarkbar sind. Sorry für diesen DOM (ist aus aktuellem CMS übernommen) Tested in FF, IE9, Chrome, Opera
Beispiel für 3 Tabs auf gängigen Browsern verlink- und bookmarkbar sind. Sorry für diesen DOM (ist aus aktuellem CMS übernommen) Tested in FF, IE9, Chrome, Opera
<div class="MainContainer">
<div class="MainContainer">
<div id="wrapper" class="BorderNormal">
<div class="MainColumn Blue">
<img src="http://placehold.it/750x400/ACACAC/ffffff">
<div id="MainContent_ctl01" class="MainContent_ctl01_class">
<ul id="TabNav">
<li class="tab1"><a href="#T1"><h2>Direkt online bestellen</h2></a></li>
<li class="tab2"><a href="#T2"><h2>Via Software bestellen</h2></a></li>
<li class="tab2"><a href="#T3"><h2>Bestellung per Post</h2></a></li>
</ul>
</div><!-- /#MainContent_ctl01 -->
<div class="OneHundred">
<div class="Left100"><h4>Headline 1</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="btn gruen">Button</div></div>
<div class="clear"></div>
</div><!-- /.OneHundred -->
<div class="OneHundred">
<div class="Left100"><h4>Headline 2</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn gelb">Button</div></div>
<div class="clear"></div>
</div><!-- /.OneHundred -->
<div class="OneHundred">
<div class="Left100"><h4>Headline 3</h4><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn gelb">Button</div></div>
<div class="clear"></div>
</div><!-- /.OneHundred -->
</div> <!-- /.MainColumn .Blue -->
</div> <!-- /#wrapper -->
</div> <!-- /.MainContainer -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
html, body {color: #444444; font-family: Verdana,sans- serif;font- size: 13px;
html, body {color: #444444; font-family: Verdana,sans-serif;font-size: 13px;
background-color:#AAA;
}
* { margin: 0; padding: 0; }
.clear, .Clear {clear: both; font-size: 0;}
.Left100 {float: left; overflow: hidden; width: 100%; }
.MainContainer { margin: 0 auto 30px; position: relative; width: 960px; }
#wrapper { position: relative; z-index: 50;
background-color:#ccc;
height:800px;
}
.MainColumn > *, .Top > * { padding: 15px 15px 0; }
.MainColumn { border-radius: 10px;
width: 780px;
background-color:#FFF;
}
/* TabNav */
.MainContent_ctl01_class {
background: linear-gradient(center top , #FFF, #DDD) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: linear-gradient(center top , #FFF, #DDD) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: linear-gradient(center top , #FFF, #DDD) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: linear-gradient(center top , #FFF, #DDD) repeat scroll 0 0 rgba(0, 0, 0, 0);
padding:0;
}
ul#TabNav {
border-bottom: 1px solid #CACBCB;
font-weight: bold;
list-style-type: none;
margin: 2em 0;
padding: 0px 10px;
height:40px;
}
ul#TabNav a h2 {
color: #666;
font-weight: normal;
font-size: 13px;
margin:0;
padding:0;
display:inline;
}
ul#TabNav .active h2 {
color: #217FC5;
font-weight: bold;
font-size: 15px;
}
ul#TabNav li {
cursor: pointer;
padding: 0px;
}
ul#TabNav li .active {
border-bottom: 2px solid #FFFFFF;
padding: 3px auto 1px;
background: none repeat scroll 0 0 #FFFFFF;
}
ul#TabNav a:hover {
background: #fff;
}
ul#TabNav a {
background-color: #EEE;
border-color: #CACBCB;
border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
border-image: none;
border-style: solid solid none;
border-width: 1px 1px medium;
color: #444;
margin-right: 5px;
padding: 10px 20px;
text-decoration: none;
line-height: 18px;
float:left;
}
li.tab1 a , li.tab2 a {
border-bottom: 10px solid #FFFFFF;
outline:0;
}
/* END TabNav */
.OneHundred { margin: 0px; clear:both;
height:20em;}
.MainColumn ul li {display:inline; background-image:none;}
.MainContent_ctl01_class {
margin:0;
padding:0;
}
h4 {
color: #444444;
font-size: 18px;
font-weight: normal;
}
$(function(){
$(function(){
// TabNav functions
function contentSwitcher(settings){
var settings = {
contentClass : '.OneHundred',
navigationId : '#TabNav'
};
// Add ID to div
$(settings.contentClass).attr('id','T1')
.next(settings.contentClass).attr('id','T2')
.next(settings.contentClass).attr('id','T3');
//Hide all of the content except the first one on the nav
$(settings.contentClass).not(':first').hide();
$(settings.navigationId).find('li:first').find('a').addClass('active');
//onClick set the active state,
//hide the content panels and show the correct one
$(settings.navigationId).find('a').click(function(e){
var contentToShow = $(this).attr('href');
contentToShow = $(contentToShow);
//dissable normal link behaviour
e.preventDefault();
//set the proper active class for active state css
$(settings.navigationId).find('li').find('a').removeClass('active');
$(this).parent('li').find('a').addClass('active');
//hide the old content and show the new
$(settings.contentClass).hide();
contentToShow.show();
});
}
contentSwitcher();
});
/*
* jQuery hashchange event - v1.3 - 7/21/2010
* http://benalman.com/projects/jquery-hashchange-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function ($, e, b) {var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}
$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}
$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};
function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}
$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()})
.attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title")
{q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write
('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
/* end hashchange plugin */
$(function() {
var hrefs = new Array();
$('#TabNav li').each(function(){
hrefs.push($(this).find('a').attr('href'));
})
$(window).hashchange( function(){
var hash = location.hash;
if($.inArray(hash, hrefs)!=-1)
{
$("#TabNav li a").removeClass("active");
$('a[href='+$(location).attr("hash")+']').addClass("active");
$(".OneHundred").hide();
var activeTab = hash;
$(activeTab).show();
$("#TabNav li a").unbind('click');
$("#TabNav li a.active").click(function(e) { return false; });
$("#TabNav li a").css('cursor', 'pointer');
$("#TabNav li a.active").css('cursor', 'default');
}
else if(hash=='')
{
$(".OneHundred").hide();
$("#TabNav li a").removeClass("active");
$("#TabNav li:first a").addClass("active");
$(".OneHundred:first").show();
$("#TabNav li a").unbind('click');
$("#TabNav li a.active").click(function(e) { return false; });
$("#TabNav li a").css('cursor', 'pointer');
$("#TabNav li a.active").css('cursor', 'default');
}
});
$(window).hashchange();
});