Der Treffpunkt für Hilfe, Tricks & Tipps!

Haben Sie Ärger mit Ihrem PC? Haben Sie Fragen zu Ihrer Homepage? Suchen Sie Informationen, Hilfe und Unterstützung?

<style>
.tabmenu_live .tabcontent {
padding:5px 5px 15px 5px;
color:#222222;
}
.tabcontent_top {
background: #4797df bottom left repeat-x;
margin:-5px -5px 15px -5px;
height: 15px;
}
.tabcontent_wrapper {
background: #ffffff;
border:2px solid #b4c9db;
box-shadow: 5px 5px 5px #aaaaaa;
margin:0 5px;
 
/* Gaia */
margin-right: 150px;
}
.tabmenu_ul {
margin:0 0 -3px 0 !important;
padding: 0 0 0 15px;
}
.tabmenu_ul li {
float:none;
display:inline;
margin:0 8px 0 0;
}
.tabmenu_ul li a, .tabmenu_ul li a:link {
background:#e5e5e5;
font-size:13px;
color:#000000 !important;
box-shadow: 1px 1px 1px #4797df, -1px 1px 1px #4797df, 1px -1px 1px #4797df, -1px -1px 1px #4797df;
border:1px solid #b4c9db;
padding:4px 9px;
text-decoration: none !important;
}
.tabmenu_ul li a:hover {
background: #238eeb;
color:#ffffff !important;
}
.tabmenu_ul li a.current {
background: #4797df;
color:#ffffff !important;
border-bottom: 1px solid #4797df;
}
h4 {
color: #ffffff !important;
}
</style>
 

<!--  Das Tab-Menü  -->
<div class="tabmenu">
 
<div class="tab"><h4 class="tabtitle">TAB 1</h4><div class="tabcontent"><div class="tabcontent_top"></div>
Inhalt TAB 1
</div></div>
 
<div class="tab"><h4 class="tabtitle">TAB 2</h4><div class="tabcontent"><div class="tabcontent_top"></div>
Inhalt TAB 2
</div></div>
 
<div class="tab"><h4 class="tabtitle">TAB 3</h4><div class="tabcontent"><div class="tabcontent_top"></div>
Inhalt TAB 3
</div></div>
 
</div>
 
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<script>
/*
* tabmenu Tabbed Menu Script
* version 1.0.2
* info @ http://zenverse.net/tabmenu-tabbed-menu/
* by Zen @ http://zenverse.net/
* License : GPL
* Free for any purpose
*/
 
/* Animation für Tab Menü (fade, slide oder none) */
var tabmenu_animation_style = 'slide';
 
/* Animationsgeschwindigkeit für Tab Menü (fast, normal, slow oder in Millisekunden) - Nur für fade und slide
/* Beim Eintrag in Millisekunden, ohne Häkchen */
var tabmenu_animation_speed = 'slow';
 
(function($tabmenu) {
 
$tabmenu(document).ready(function() {
var nth_tabmenu = 0;
var tabmenu_firsttab = [];
 
if (!tabmenu_animation_speed) { tabmenu_animation_speed = 'fast'; }
 
$tabmenu('.tabmenu').each( function() {
var gettabtitle = [],gettabcontent = [];
tabmenu_firsttab[nth_tabmenu] = 0;
var loop = 0;
  
  $tabmenu(this).find('.tab').each( function () {
    if ($tabmenu(this).hasClass('firsttab')) { tabmenu_firsttab[nth_tabmenu] = loop; }
    loop++;
  });
  
  $tabmenu(this).find('.tab').find('.tabtitle').each( function () {
    gettabtitle.push($tabmenu(this).html());
  });
    
  $tabmenu(this).find('.tab').find('.tabcontent').each( function () {
    gettabcontent.push($tabmenu(this).html());
  });
    
  if (gettabtitle.length > 0) {
    var htmlcodes = '<ul class="tabmenu_ul">';
  
    for (var i=0;i<gettabtitle.length;i++) {
      htmlcodes += '<li><a href="javascript:void(null)" class="t'+i+'">'+gettabtitle[i]+'</a></li>';
    }
  
    htmlcodes += '</ul><div class="tabcontent_wrapper">';
  
    for (var i2=0;i2<gettabcontent.length;i2++) {
      htmlcodes += '<div class="tabcontent">'+gettabcontent[i2]+'</div>';
    }
  
    htmlcodes += '</div>';
  
    $tabmenu(this).removeClass('tabmenu').addClass('tabmenu_live').attr('id','tabmenu_id_'+nth_tabmenu).html(htmlcodes);
 
    $tabmenu(this).find('.tabcontent').not(':eq('+tabmenu_firsttab[nth_tabmenu]+')').hide();
    $tabmenu(this).find('.tabmenu_ul li  a').eq(tabmenu_firsttab[nth_tabmenu]).addClass('current');
  }
 
nth_tabmenu++;  
});
 
  $tabmenu('.tabmenu_live').find('.tabmenu_ul > li > a').click( function(event) {
    var currzentab = $tabmenu(this).parent('li').parent('ul').parent('.tabmenu_live');
    var currid = currzentab.attr('id').replace('tabmenu_id_','');
    
    var currnth = $tabmenu(this).attr('class').replace('t','');
    var childnum = parseInt(currnth);
    if (tabmenu_firsttab[currid] == childnum) { event.preventDefault(); return false; }
    
    currzentab.find('.tabmenu_ul li  a').removeClass('current');
    
    if (currzentab.find('.tabcontent').is(':animated')) { currzentab.find('.tabcontent').is(':animated').stop(true,true); }
    
    switch (tabmenu_animation_style) {
      case 'fade':
      currzentab.find('.tabcontent:eq('+tabmenu_firsttab[currid]+')').fadeOut(tabmenu_animation_speed, function() {
        currzentab.find('.tabcontent:eq('+childnum+')').fadeIn(tabmenu_animation_speed);
        currzentab.find('.tabmenu_ul li').eq(childnum).children('a').addClass('current');
      }); 
      break;
      case 'none':
      currzentab.find('.tabcontent:eq('+tabmenu_firsttab[currid]+')').hide(10, function() {
        currzentab.find('.tabcontent:eq('+childnum+')').show();
        currzentab.find('.tabmenu_ul li').eq(childnum).children('a').addClass('current');
      });
      break;
      default:
      currzentab.find('.tabcontent:eq('+tabmenu_firsttab[currid]+')').slideUp(tabmenu_animation_speed, function() {
        currzentab.find('.tabcontent:eq('+childnum+')').slideDown(tabmenu_animation_speed);
        currzentab.find('.tabmenu_ul li').eq(childnum).children('a').addClass('current');
      }); 
      break;
    }   
    
    tabmenu_firsttab[currid] = childnum;
    event.preventDefault(); 
  });
 
});
 
})(jQuery);
</script>
 

<div onclick="xob_insert('[tabmenu]\n\n[tab=Tab 1]Inhalt TAB 1[/tab]\n[tab=Tab 2]Inhalt TAB 2[/tab]\n[tab=Tab 3]Inhalt TAB 3[/tab]\n\n[/tabmenu]','')" class="xob_icon_cont"><img alt="TAB-Menü" title="TAB-Menü" class="xob_icon" src="//img.homepagemodules.de/ds/static/feedicons/post.png"></div>
 

<script>
/*
* tabmenu Tabbed Menu Script
* version 1.0.2
* info @ http://zenverse.net/tabmenu-tabbed-menu/
* by Zen @ http://zenverse.net/
* License : GPL
* Free for any purpose
*/
 
/* Animation für Tab Menü (fade, slide oder none) */
var tabmenu_animation_style = 'slide';
 
/* Animationsgeschwindigkeit für Tab Menü (fast, normal, slow oder in Millisekunden) - Nur für fade und slide
/* Beim Eintrag in Millisekunden, ohne Häkchen */
var tabmenu_animation_speed = 'slow';
 
(function($tabmenu) {
 
$tabmenu(document).ready(function() {
var nth_tabmenu = 0;
var tabmenu_firsttab = [];
 
if (!tabmenu_animation_speed) { tabmenu_animation_speed = 'fast'; }
 
$tabmenu('.tabmenu').each( function() {
var gettabtitle = [],gettabcontent = [];
tabmenu_firsttab[nth_tabmenu] = 0;
var loop = 0;
  
  $tabmenu(this).find('.tab').each( function () {
    if ($tabmenu(this).hasClass('firsttab')) { tabmenu_firsttab[nth_tabmenu] = loop; }
    loop++;
  });
  
  $tabmenu(this).find('.tab').find('.tabtitle').each( function () {
    gettabtitle.push($tabmenu(this).html());
  });
    
  $tabmenu(this).find('.tab').find('.tabcontent').each( function () {
    gettabcontent.push($tabmenu(this).html());
  });
    
  if (gettabtitle.length > 0) {
    var htmlcodes = '<ul class="tabmenu_ul">';
  
    for (var i=0;i<gettabtitle.length;i++) {
      htmlcodes += '<li><a href="javascript:void(null)" class="t'+i+'">'+gettabtitle[i]+'</a></li>';
    }
  
    htmlcodes += '</ul><div class="tabcontent_wrapper">';
  
    for (var i2=0;i2<gettabcontent.length;i2++) {
      htmlcodes += '<div class="tabcontent">'+gettabcontent[i2]+'</div>';
    }
  
    htmlcodes += '</div>';
  
    $tabmenu(this).removeClass('tabmenu').addClass('tabmenu_live').attr('id','tabmenu_id_'+nth_tabmenu).html(htmlcodes);
 
    $tabmenu(this).find('.tabcontent').not(':eq('+tabmenu_firsttab[nth_tabmenu]+')').hide();
    $tabmenu(this).find('.tabmenu_ul li  a').eq(tabmenu_firsttab[nth_tabmenu]).addClass('current');
  }
 
nth_tabmenu++;  
});
 
  $tabmenu('.tabmenu_live').find('.tabmenu_ul > li > a').click( function(event) {
    var currzentab = $tabmenu(this).parent('li').parent('ul').parent('.tabmenu_live');
    var currid = currzentab.attr('id').replace('tabmenu_id_','');
    
    var currnth = $tabmenu(this).attr('class').replace('t','');
    var childnum = parseInt(currnth);
    if (tabmenu_firsttab[currid] == childnum) { event.preventDefault(); return false; }
    
    currzentab.find('.tabmenu_ul li  a').removeClass('current');
    
    if (currzentab.find('.tabcontent').is(':animated')) { currzentab.find('.tabcontent').is(':animated').stop(true,true); }
    
    switch (tabmenu_animation_style) {
      case 'fade':
      currzentab.find('.tabcontent:eq('+tabmenu_firsttab[currid]+')').fadeOut(tabmenu_animation_speed, function() {
        currzentab.find('.tabcontent:eq('+childnum+')').fadeIn(tabmenu_animation_speed);
        currzentab.find('.tabmenu_ul li').eq(childnum).children('a').addClass('current');
      }); 
      break;
      case 'none':
      currzentab.find('.tabcontent:eq('+tabmenu_firsttab[currid]+')').hide(10, function() {
        currzentab.find('.tabcontent:eq('+childnum+')').show();
        currzentab.find('.tabmenu_ul li').eq(childnum).children('a').addClass('current');
      });
      break;
      default:
      currzentab.find('.tabcontent:eq('+tabmenu_firsttab[currid]+')').slideUp(tabmenu_animation_speed, function() {
        currzentab.find('.tabcontent:eq('+childnum+')').slideDown(tabmenu_animation_speed);
        currzentab.find('.tabmenu_ul li').eq(childnum).children('a').addClass('current');
      }); 
      break;
    }   
    
    tabmenu_firsttab[currid] = childnum;
    event.preventDefault(); 
  });
 
});
 
})(jQuery);
</script>
 

<div onclick="xob_insert('[tabmenu]\n\n[tabo]TAB 1[/tabo]\n[tabo]TAB 2[/tabo]\n[tabo]TAB 3[/tabo]\n\n[inhalt]Text 1[/inhalt]\n[inhalt]Text 2[/inhalt]\n[inhalt]Text 3[/inhalt]\n\n[/tabmenu]','')" class="xob_icon_cont"><img alt="TAB-Menü" title="TAB-Menü" class="xob_icon" src="//img.homepagemodules.de/ds/static/feedicons/post.png"></div>
 

<script>
window.addEventListener('load', function(){
 
/* Umbrüche zwischen den TAB's löschen  - Nur für TAB's in Forum-Beiträgen */
$('.tabmenu_live > br,.tabcontent + br').replaceWith(' ');
 
/* Tab Scroll-Funktion */
$('.tabmenu_live .tab, .tabcontent .exit').on("click", function() {
  $('html, body').delay(300).animate({scrollTop: $(this).closest('.tabmenu_live').offset().top -150})
});
 
$('.tabmenu_live .tab').on("click", function() {
    var tabmenu =  $(this).closest('.tabmenu_live');
    /* Geklickten Tab hervorheben */
    var selectedTab = this;
    tabmenu.find('.tab').not($(this).toggleClass('current')).removeClass('current'); 
 
    /* Zahl von geklicktem Tab finden */
    var counter = 0;
    $('.tabmenu_live .tab').each(function() {
      if(selectedTab == this) {
        return false;
      }
      counter++;
    }); 
	  
    /* Tab anzeigen */    
    var tab = $('.tabcontent').eq(counter);
    tab.toggleClass('current');
    tabmenu.find('.tabcontent').not(tab).hide();
});
 
/* Schießen-Button */
$('.tabcontent .exit').on("click", function() {
    var tabmenu =  $(this).closest('.tabmenu_live');
    tabmenu.find('.tabcontent').hide(500);
    tabmenu.find('.tab').removeClass('current'); 
});
 
});
</script>