Ajax Loader
×

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

HTML
<div class="MainContainer">
1
<div class="MainContainer">
2
  <div id="wrapper" class="BorderNormal">
3
    <div class="MainColumn Blue">
4
      <img src="http://placehold.it/750x400/ACACAC/ffffff">
5
 
6
      
7
      <div id="MainContent_ctl01" class="MainContent_ctl01_class">
8
        <ul id="TabNav">
9
          <li class="tab1"><a href="#T1"><h2>Direkt online bestellen</h2></a></li>
10
          <li class="tab2"><a href="#T2"><h2>Via Software bestellen</h2></a></li>
11
          <li class="tab2"><a href="#T3"><h2>Bestellung per Post</h2></a></li>
12
        </ul>
13
      </div><!-- /#MainContent_ctl01 -->
14
      
15
 
16
    <div class="OneHundred">
17
      <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>
18
        <div class="btn gruen">Button</div></div>
19
          
20
    <div class="clear"></div>
21
    </div><!-- /.OneHundred -->
22
    
23
    <div class="OneHundred">
24
      <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>
25
      <div class="btn gelb">Button</div></div>
26
    
27
      <div class="clear"></div>
28
    </div><!-- /.OneHundred -->
29
 
30
    <div class="OneHundred">
31
      <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>
32
      <div class="btn gelb">Button</div></div>
33
    
34
      <div class="clear"></div>
35
    </div><!-- /.OneHundred -->
36
    
37
 
38
 
39
      </div> <!-- /.MainColumn .Blue -->
40
    </div> <!-- /#wrapper -->
41
</div> <!-- /.MainContainer -->
42
 
43
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS
html, body {color: #444444; font-family: Verdana,sans-serif;font-size: 13px;
1
html, body {color: #444444; font-family: Verdana,sans-serif;font-size: 13px;
2
  background-color:#AAA;
3
}
4
* { margin: 0; padding: 0; }
5
.clear, .Clear {clear: both; font-size: 0;}
6
.Left100 {float: left; overflow: hidden; width: 100%; }
7
.MainContainer { margin: 0 auto 30px; position: relative; width: 960px; }
8
 
9
#wrapper { position: relative; z-index: 50;
10
  background-color:#ccc;
11
  height:800px;
12
}
13
.MainColumn > *, .Top > * { padding: 15px 15px 0; }
14
.MainColumn {    border-radius: 10px; 
15
  width: 780px; 
16
  background-color:#FFF;
17
}
18
 
19
 
20
/* TabNav  */ 
21
.MainContent_ctl01_class { 
22
 background: linear-gradient(center top , #FFF, #DDD) repeat scroll 0 0 rgba(0, 0, 0, 0);
23
  background: -moz-linear-gradient(center top , #FFF, #DDD) repeat scroll 0 0 rgba(0, 0, 0, 0);
24
  background: -webkit-linear-gradient(center top , #FFF, #DDD) repeat scroll 0 0 rgba(0, 0, 0, 0);
25
  background: -ms-linear-gradient(center top , #FFF, #DDD) repeat scroll 0 0 rgba(0, 0, 0, 0);
26
  padding:0;
27
}
28
 
29
ul#TabNav {
30
    border-bottom: 1px solid #CACBCB;
31
    font-weight: bold;
32
    list-style-type: none;
33
    margin: 2em 0;
34
    padding: 0px 10px;
35
  height:40px;
36
}
37
 
38
ul#TabNav a h2  {
39
  color: #666;
40
  font-weight: normal;
41
  font-size: 13px;
42
  margin:0; 
43
  padding:0;
44
  display:inline;
45
}
46
 
47
ul#TabNav .active h2  {
48
  color: #217FC5;
49
  font-weight: bold;
50
  font-size: 15px;
51
}
52
 
53
ul#TabNav li {
54
  cursor: pointer;
55
  padding: 0px;
56
}
57
 
58
ul#TabNav li .active {
59
  border-bottom: 2px solid #FFFFFF;
60
  padding: 3px auto 1px;
61
  background: none repeat scroll 0 0 #FFFFFF;
62
}
63
 
64
ul#TabNav a:hover { 
65
background: #fff;  
66
}
67
 
68
ul#TabNav a {
69
    background-color: #EEE;
70
    border-color: #CACBCB;
71
    border-radius: 4px 4px 0px 0px;
72
    -moz-border-radius: 4px 4px 0px 0px;
73
    -webkit-border-radius: 4px 4px 0px 0px;
74
    border-image: none;
75
    border-style: solid solid none;
76
    border-width: 1px 1px medium;
77
    color: #444;
78
    margin-right: 5px;
79
    padding: 10px 20px;
80
    text-decoration: none;
81
  line-height: 18px;
82
  float:left;
83
}
84
 
85
li.tab1 a , li.tab2 a {
86
  border-bottom: 10px solid #FFFFFF;
87
  outline:0; 
88
  
89
}
90
/* END TabNav */
91
 
92
.OneHundred {    margin: 0px; clear:both;
93
height:20em;}
94
.MainColumn ul li {display:inline; background-image:none;}
95
.MainContent_ctl01_class {
96
  margin:0;
97
  padding:0;
98
}
99
 
100
h4 {
101
    color: #444444;
102
    font-size: 18px;
103
    font-weight: normal;
104
}
 
JavaScript
$(function(){ 
1
$(function(){ 
2
 // TabNav functions
3
    function contentSwitcher(settings){
4
        var settings = {
5
           contentClass : '.OneHundred',
6
           navigationId : '#TabNav'
7
        };
8
        // Add ID to div
9
        $(settings.contentClass).attr('id','T1')
10
        .next(settings.contentClass).attr('id','T2')
11
        .next(settings.contentClass).attr('id','T3');
12
      
13
        //Hide all of the content except the first one on the nav
14
        $(settings.contentClass).not(':first').hide();
15
        $(settings.navigationId).find('li:first').find('a').addClass('active');
16
 
17
        //onClick set the active state, 
18
        //hide the content panels and show the correct one
19
        $(settings.navigationId).find('a').click(function(e){
20
            var contentToShow = $(this).attr('href');
21
            contentToShow = $(contentToShow);
22
 
23
            //dissable normal link behaviour
24
            e.preventDefault();
25
 
26
            //set the proper active class for active state css
27
            $(settings.navigationId).find('li').find('a').removeClass('active');
28
            $(this).parent('li').find('a').addClass('active');
29
 
30
            //hide the old content and show the new
31
            $(settings.contentClass).hide();
32
            contentToShow.show();
33
        });
34
    }
35
    contentSwitcher();
36
});
37
 
38
/*
39
 * jQuery hashchange event - v1.3 - 7/21/2010
40
 * http://benalman.com/projects/jquery-hashchange-plugin/
41
 * 
42
 * Copyright (c) 2010 "Cowboy" Ben Alman
43
 * Dual licensed under the MIT and GPL licenses.
44
 * http://benalman.com/about/license/
45
 */
46
(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")}
47
$.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}
48
$(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};
49
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)}
50
$.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()})
51
.attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title")
52
{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
53
('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
54
/* end hashchange plugin */
55
 
56
 
57
$(function() {
58
 
59
 var hrefs = new Array();
60
 $('#TabNav li').each(function(){
61
   hrefs.push($(this).find('a').attr('href'));
62
 })
63
 
64
 $(window).hashchange( function(){
65
   var hash = location.hash;
66
   if($.inArray(hash, hrefs)!=-1)
67
    {
68
     $("#TabNav li a").removeClass("active");
69
     $('a[href='+$(location).attr("hash")+']').addClass("active"); 
70
     $(".OneHundred").hide();
71
     var activeTab = hash; 
72
     $(activeTab).show();
73
     $("#TabNav li a").unbind('click');
74
     $("#TabNav li a.active").click(function(e) { return false; });
75
     $("#TabNav li a").css('cursor', 'pointer');
76
     $("#TabNav li a.active").css('cursor', 'default');
77
    }
78
   else if(hash=='')
79
    {
80
     $(".OneHundred").hide();
81
     $("#TabNav li a").removeClass("active");
82
     $("#TabNav li:first a").addClass("active");
83
     $(".OneHundred:first").show();
84
     $("#TabNav li a").unbind('click');
85
     $("#TabNav li a.active").click(function(e) { return false; });
86
     $("#TabNav li a").css('cursor', 'pointer');
87
     $("#TabNav li a.active").css('cursor', 'default');
88
    }
89
 });
90
 
91
 $(window).hashchange();
92
 
93
});
94
 
 

Tabs mit Hashchange Funktion

CSSDeck G+