Applications are open! Apply until 15 January for German-language Master’s programs and selected English-language Master’s programs starting in the summer semester.
Tabs
Mit Tabs (auch bekannt als Registerkarten) kann man lange Seiten übersichtlicher gestalten. Anfangs wird nur ein Teil des Inhalts dargeboten – der aktive Tab. Die Besucherin sieht zugleich die anderen – nicht aktiven – Tabs. Klickt der Besucher auf einen nicht aktiven Tab, wird der "nach vorne geholt", zugehörige Textkörper sichtbar gemacht. Diese Seite selbst ist ein Beispiel.
// Hier die IDs der Inhaltselemente eintragen
var panels = [85184,85186,85187,98712];
// sonst unverändert lassen
var headings = [];
var tabs = [];
var currentpanel;
$(document).ready(function(){
for (i = 0; i < panels.length; i++) {
$( "#c"+panels[i] ).addClass( "panel" );
headings[i] = $( "#c" + panels[i] + " > h2").text( );
tabs[i] = "
" + headings[i] + "";
}
$( "#tabs" ).prepend( tabs.join("") );
$( "#tabs li#t" + panels[0] ).addClass( "active" );
$( "div#c" + panels[0] ).addClass( "active" );
$( "#tabs li" ).click(function(e){
$(".active").toggleClass("active");
$( this ).toggleClass("active");
currentpanel = "#c" + e.target.id.substring(1,e.target.id.length);
$( currentpanel ).toggleClass("active");
});
});
Dies ist der Tab "Funktion". Mit Tabs (auch bekannt als Registerkarten) kann man lange Seiten übersichtlicher gestalten. Anfangs wird nur ein Teil des Inhalts dargeboten – der aktive Tab. Die Besucherin sieht zugleich die anderen – nicht aktiven – Tabs. Klickt der Besucher auf einen nicht aktiven Tab, wird der "nach vorne geholt", zugehörige Textkörper sichtbar gemacht. Diese Seite selbst ist ein Beispiel.
- Zunächst bearbeiten Sie den Inhalt. Dabei erzeugen Sie für jeden künftigen Tab ein neues Inhaltselement vom Typ Text & Media. Jedes Inhaltselement hat eine Überschrift vom Typ Layout 2.
- Notieren Sie sich die IDs der Inhaltselemente, die Tabs werden sollen.
- Für die Tabs erzeugen Sie ein neues Inhaltselement vom Typ HTML und kopieren den Inhalt der Tabs JavaScript und CSS hinein.
- In der JavaScript-Zeile, die beginnt mit var panels = ersetzen Sie die Liste der Zahlen zwischen den eckigen Klammern durch die IDs Ihrer Inhaltselemente, und zwar mit Kommata getrennt.
<script>
// Hier die IDs der Inhaltselemente eintragen
var panels = [85184,85186,85187];
// sonst unverändert lassen
var headings = [];
var tabs = [];
var currentpanel;
$(document).ready(function(){
for (i = 0; i < panels.length; i++) {
$( "#c"+panels[i] ).addClass( "panel" );
headings[i] = $( "#c" + panels[i] + " > h2").text( );
tabs[i] = "<li id='t" + panels[i] + "'>" + headings[i] + "</li>";
}
$( "#tabs" ).prepend( tabs.join("") );
$( "#tabs li#t" + panels[0] ).addClass( "active" );
$( "div#c" + panels[0] ).addClass( "active" );
$( "#tabs li" ).click(function(e){
$(".active").toggleClass("active");
$( this ).toggleClass("active");
currentpanel = "#c" + e.target.id.substring(1,e.target.id.length);
$( currentpanel ).toggleClass("active");
});
});
</script>
<ul id="tabs">
</ul>
<style>
div.panel {
display:none;
background: transparent;
}
div.panel.active {
display:block;
background-color:transparent;
border: 1px solid lightgray;
padding: 0 1em;
}
ul#tabs {
list-style-type:none;
padding-bottom:0px;
overflow: hidden;
margin-bottom: -1px;
}
ul#tabs li {
background-color:white;
border: 1px solid lightgray;
border-radius: 12px 12px 0 0;
float:left;
padding:0.5em 1.5em;
cursor:pointer;
}
ul#tabs li.active {
background-color:white;
border-bottom: 1px solid white;
}
</style>
Dieses Inhaltselement ist nicht in die Liste der Tabs aufgenommen und steht deshalb permanent unverändert.
