z-index ändern

[SusanneW]

Hallo @all

Hab 3 Tab diese überlappen sich etwas, wie kann ich den z-index ändern, wenn der Benutzer zb. auf Tab 2 geht?

beim start der Site: // hier ist alles super
Tab01: z-index 4
Tab02: z-index 2
Tab03: z-index 1

Wie erreich ich das hier???
Benutzer klick link in Tab02 an:
Tab01: z-index 2
Tab02: z-index 4
Tab03: z-index 1

Benutzer klickt link in Tab03 an:
Tab01: z-index 2
Tab02: z-index 1
Tab03: z-index 4

Benutzer klickt link in Tab01 an:
Tab01: z-index 4
Tab02: z-index 2
Tab03: z-index 1

Wenn ein Tab den z-index 4 hat soll auch eine andere grafik rein
background-image: url(../grafiken/tab_an.gif);
background-repeat: no-repeat;
mein code:
<div id="menu">

<div id="tab01">
<a id="a_tab01" href="install.php">bla01</a>
</div>
<div id="tab01">
<a id="a_tab02" href="install.php?...">bla02</a>
</div>
<div id="tab03">
<a id="a_tab03" href="install.php?..." >bla03</a>
</div>

</div>

css Datei: //die muss bestimm etwas anders aussehen

a img
{
border: 0pt;
}

#menu
{
margin: 0px;
padding: 0px;
}

#menu #tab01
{
}
#menu #tab02
{
}
#menu #tab03
{
}
a {
border: 1pt solid #00CC00;
position: absolute;
padding-top: 8px;
margin-top: 12px;
height: 30px;
width: 230px;
text-decoration: none;
text-align: center;
color: #000000;
font-weight: bold;
background-image: url(../grafiken/tab.gif);
background-repeat: no-repeat;
}
#a_tab01{

margin-left: 10%;
z-index: 4;
}
#a_tab02{

margin-left: 32%;
z-index: 2;
}
#a_tab03{
margin-left: 54%;
z-index: 1;

}

Ich hoffe jemand hat ne einfache Lösung, denk bitte daran das ich noch Anfängerin bin.
Oder muss ich an die Sache anders rangehn und mit 3 Grafiken arbeiten, also.
Tab_links, Tab_mitte, Tab_rechts (-links und -rechts ist der Überlappende teil)

LG
Susanne

[Kropff]

das geht nur mit javascript. verpass jeder tabelle eine eindeutige id, dann kanst du den z-index entsprechend mit einem onlick ändern. vom prinzip her so:

<table id="tab02" ... onclick="pachmicknachoben('tab02')">
...
function pachmicknachoben(id)
{
  document.getElementById(id).style.zIndex = 4;
} 

und das machst du mit allen tabellen.

gruß
peter

[SusanneW]

Hallo

Danke für die Antwort, aber
Irgendwie is es das nicht.

Tab01 heist nicht Table01, ich hätt auch Reiter01 schreiben können.
hab 3 Div in jeden ist ein link(a Tag) drinn, wenn ich auf ein link klicke soll sich der z-index, der 3 div's sich ändern.
Frage: Wie am besten?

function pachmicknachoben(id)
{
  document.getElementById(id).style.zIndex = 4;
} 

bei zIndex darf keine feste Zahl stehn die will ich ja angeben.

<table id="tab02" ... onclick="pachmicknachoben('tab02')"> 

das müste dann irgendwie so ausschauen:

<table id="tab01" ... onclick="
pachmicknachoben=4('tab01');
pachmicknachoben=2('tab02');
pachmicknachoben=1('tab03')">
<table id="tab02" ... onclick="
pachmicknachoben=1('tab01');
pachmicknachoben=4('tab02');
pachmicknachoben=2('tab03')">
<table id="tab03" ... onclick="
pachmicknachoben=1('tab01');
pachmicknachoben=2('tab02');
pachmicknachoben=4('tab03')"> 

Für Table kann ich doch auch div nemen oder?
prob ist das in dem div ein a tag ist, will ja nicht neben den a Tag drücken das sich mein div index ändert, ja sowas blödes hab ich schon geproogt

Vieleicht muss die Funktion blos etwas umgeschreiben werden.

LG
Susanne

[Kropff]

ob tabelle oder div ist lattens. du legst auf den link ein onclick und übergibst dann die benötigten parameter. dazu brauchst du keine festen werte. man könnte z.b. alle infos in einem array bereitstellen und dann anahnd der parameter für alle entsprechenden elemente einen z-index vergeben.

gruß
peter

[SusanneW]

Hallo

Irgendwie klappt da was nicht
Hier nochmal mein code

<script type="text/JavaScript">
<!--
function z_index(id, x)
{
    var index    =  x;
    document.getElementById(id).style.zIndex = x;
}
//-->
</script> 

<!--location='index.php'-->    
<div class="tab" id="tab01" onclick="
    
    z_index('tab01','4');
    z_index('tab02','2');                                                                                                                                                        
    z_index('tab03','1') 
    
    ">
        
    Home
</div>

<!--location='index.php?section=tab02'-->        
<div class="tab" id="tab02" onclick="    
    
    z_index('tab01','2');
    z_index('tab02','4');
    z_index('tab03','1')
    
    ">                     
        Zu Home?sectionTab02
            
</div>

<!--location='install.php?section=dateien_zuweisen'-->
<div class="tab" id="tab03"    onclick="
    
    z_index('tab01','2');
    z_index('tab02','1');
    z_index('tab03','4')
    
                " >
                    Zu Home?sectionTab03
</div> 

so ändert sich der zIndex, wie ich es will, alles super
ABER:

<div class="tab" id="tab03"    onclick="
    
    z_index('tab01','2');
    z_index('tab02','1');
    z_index('tab03','4');
    location='install.php?section=dateien_zuweisen'
                " >
                    Zu Home?sectionTab03
</div> 

setz ich den link rein, dann geht er auf den link der zIndex wird aber nur für ne millisekunde geändert
Es geht bei mir immer nur eins.
Wo ist der fehler?

LG
Susanne

[Kropff]

weil dann eine neue seite geladen wird und alle informationen erst mal wieder hops sind. da musst dann die entsprechenden werte als parameter beim link mit durchschleifen und dort weiterverarbeiten.

gruß
peter

[SusanneW]

Hallo

Kannst du mir ein Tip geben wie das geht, bin doch noch Anfängerin.

hab:

<div>tap01</div> <div>tab02</div> <div>tab03</div>

<div> Inhalt </div>

der Inhalt ist die section wo alles erscheint wenn ich auf die Tap klicke.
Das funktioniert auch alles.
Wie schon geschrieben einzeln funks alles.

// das klappt
<div class="tab" id="tab02" onclick="    
    
    z_index('tab01','2');
    z_index('tab02','4');
    z_index('tab03','1')
    
    ">                     
        Zu Home?sectionTab02
            
</div>

//das auch

<div class="tab" id="tab02" onclick="    
    
    location='install.php?section=tab02'
    
    ">                     
        Zu Home?sectionTab02
            
</div>

// und das mag er nicht

<div class="tab" id="tab02" onclick="    
    
    z_index('tab01','2');
    z_index('tab02','4');
    z_index('tab03','1');
    location='install.php?section=tab02'
    ">                     
        Zu Home?sectionTab02
            
</div> 

ich weiß das ich nerve, aber ich hab imo ka wie ich das hinbekommen soll, dass beides geht.

LG
Susanne