Hallo,
ich hab ein Problemchen mit der Erstellung einer Tab-Navigation (Karteikartenelement) auf meiner Seite.
diesbezüglich habe ich ein Beispiel aus einem Buch, welches ich kurz darstelle um auf mein Problem zu kommen.
Implementierung der Navigation, in Html
CSS-Klassen
Ich habe das Problem, das so wie die CSS-Klassen geschrieben sind, die sich auf meine Menüleiste beziehen, aber nicht auf meine Navigations-Tabs.
Was muss ich in meinen CSS-Klassen abändern, damit sich diese Formatierungen nicht mehr auf mein Menüleiste auswirken, sondern auf die Tabs?
Liebe Grüße, Davicito.
ich hab ein Problemchen mit der Erstellung einer Tab-Navigation (Karteikartenelement) auf meiner Seite.
diesbezüglich habe ich ein Beispiel aus einem Buch, welches ich kurz darstelle um auf mein Problem zu kommen.
Implementierung der Navigation, in Html
HTML:
<head>
<!--script text"text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script-->
<script>
$(document).ready(function(){
tabs($('div.tabs'));
})
<script>
</head>
<body>
....
<nav class="menu-hover">
<!------ Menüleiste ------>
<div class="menu">
<ul>
<li><a href="">Mitarbeiter</a>
<ul>
<li><a href="menu.php">Eingabe</a></li>
<li><a href="menu.php">Bearbeiten</a></li>
<li><a href="menu.php">Ausgabe</a></li>
</ul>
</li>
<li><a href="">Einstellungen</a>
<ul>
<li><a href="menu.php">DP-Anlegen</a></li>
</ul>
</li>
</ul>
</div>
</nav>
....
<!------ Navigations-Tabs ------>
<div id="tab-1" class="tabs" title="Tab 1">
Hier steht Inhalt 1
</div>
<div id="tab-1" class="tabs" title="Tab 2">
Hier steht Inhalt 2
</div>
<div id="tab-1" class="tabs" title="Tab 3">
Hier steht Inhalt 3
</div>
</body>
Javascript:
function tabs(obj){
if(!obj.length) return;
//CSS-Klasse dyn-tabs hinzufügen
obj.addClass("dyn-tabs");
//Zeige erstes Tab (Sichtbar machen des ersten Tabs)
obj.first().show();
var tabNav = $('<ul id="tabs" />').insertBefore(obj.first());
//tabNav.addClass("ul.tab-ul");
obj.each(function(){
//Erzeuge Tab-Reiter
var listElement = $('<li />');
//listElement.addClass("li.tab-li");
//Erzeuge einen Labelname für Tab-Reiter
var label = $(this).attr("title")
? $(this).attr("title")
: "Kein Label";
//Fügt Labelname ins Tab-Reiter ein
listElement.text(label);
//Füge Tab-Reiter in an das zuvor erzeugte ul-Element an
tabNav.append(listElement);
});
//Selectiere alle li-Elemente des Elements "tab-li" und sichere es in items
var items = tabNav.find("li");
//Füge die CSS-Klasse "current" an um das erste Tab-Element hervorzuheben
items.first().addClass("current");alert(items.text);
//Eventhandler "click()" reagiert bei einem klick auf ein Tab-Element
items.click(function(){
//Das aktuelle Tab-Element wird von den CSS-Formatierungen entkoppelt
items.removeClass("current");
//und das angeklickte Tab-Element wird mit den CSS-Formatierungen(CSS-Klasse) "current" hervorgehoben
$(this).addClass("current");
//Blendet übergebendes Objekt - duch hide() - aus
obj.hide();
//Auswählen des li-Elements, duch eq(), an der position wo das li-Element in der Liste steht, durch index().
//Mit fadeIn, wird mittels Einblend-Effekt der Inhalt des Tabs sanft eingeblendet.
obj.eq($(this).index()).fadeln("slow");
});
}CSS-Klassen
CSS:
ul{
width:450px;
list-style-type:none;
margin:10px 0 0 10px;
background-color:#EEEEEE;
overflow:hidden;
}
li{
float:left;
cursor:pointer;
}
li.current{
background-color:#DDDDDD;
border-bottom:3px solid #DDDDDD;
}
div.tabs{
width:450px;
margin:0 0 10px 10px;
}
div.dyn-tabs{
width:440px;
padding:5px;
height:100px;
overflow:auto;
background-color:#DDDDDD;
display:none;
}Ich habe das Problem, das so wie die CSS-Klassen geschrieben sind, die sich auf meine Menüleiste beziehen, aber nicht auf meine Navigations-Tabs.
Was muss ich in meinen CSS-Klassen abändern, damit sich diese Formatierungen nicht mehr auf mein Menüleiste auswirken, sondern auf die Tabs?
Liebe Grüße, Davicito.
