Lexi Help
Partner
www.forumieren.com

[phpBB2] Tabs - ChangeOnglet

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [phpBB2] Tabs - ChangeOnglet

Beitrag von Sheep007 am Mi 10 Jul 2013 - 17:51

Huhu,

Nachdem ich versucht habe, auf jede erdenkliche Weise eine derartige Tab-Funktion in meinem Forum einzubauen, bin ich auf die Idee gekommen, mal hier im Forum zu suchen. So weit, so gut, Suche benutzt, folgendes gefunden:
http://hilfe.forumieren.com/t30208-tab-ansicht-changeonglet-spalten-menus-werden-falsch-angezeigt

Sah gut aus, genau nach dem, was ich gesucht habe. Habe also die Codes von allem da übernommen:
Codes:
CSS:
Code:
    /*changeOnglet*/
            .mon_onglet{
              float: left;
              padding: 2px 10px;
              margin-right: 5px;
              color: #00aeff;
              background: #6edaf5;
              background-image:url(http://t2.gstatic.com/images?q=tbn:ANd9GcTs6i4kVC8k8AOvIiK45rhv89g8WQLp8kU6RjCitXA1URCkugC4);
              border: 1px solid #000;
              cursor: pointer;
              margin-bottom: -1px;
              list-style: none;
           font-size:90%;
            }
            .mon_onglet:hover{
              background: #39dbf0;
            }      
           .mon_onglet_selected{
              float: left;
              padding: 2px 10px;
              margin-right: 5px;
              color: #000;
              background: #6edaf5;
           background-image:url(http://t2.gstatic.com/images?q=tbn:ANd9GcTs6i4kVC8k8AOvIiK45rhv89g8WQLp8kU6RjCitXA1URCkugC4);
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
              border-bottom: 1px solid #08b1ff;
              cursor: pointer;
              margin-bottom: -1px;
              list-style: none;
           font-size:90%;}        
           .clear{
              clear: both;
            }
            .mon_contenu{
              color: #000;
              background: #6edaf5;
              background-image:url(http://t2.gstatic.com/images?q=tbn:ANd9GcTs6i4kVC8k8AOvIiK45rhv89g8WQLp8kU6RjCitXA1URCkugC4);
              border: 1px solid #000;
              padding: 10px;
              line-height: normal;
              font-size: 11px;}
            #mes_contenus, #mes_onglets{
              width: 100%;
              margin: auto;}

Javascript (aktiviert auf allen Seiten, Java generell aktiviert):
Code:
function changeOnglet(_this){
        var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
        for(var i = 0; i < getOnglets.length; i++){
            if(getOnglets[i].id){
                if(getOnglets[i].id == _this.id){
                    getOnglets[i].className = 'mon_onglet_selected';
                    document.getElementById('c' + _this.id).style.display            = 'block';
                }
                else{
                    getOnglets[i].className = 'mon_onglet';
                    document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
                }
            }
        }          
   }

Im Beitrag selbst (ja, das soll in einem Beitrag sein statt auf der Startseite - macht das einen Unterschied? html ist natürlich aktiviert)
Code:
<div id="mes_onglets">
           <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Reiter 1</li>
                   <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Reiter 2</li>
                   <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Reiter 3</li>
                   <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Reiter 4</li>
                   <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Reiter 5</li>
                   <li id="o_6" class="mon_onglet" onclick="changeOnglet(this);">Reiter 6</li>
                   <li id="o_7" class="mon_onglet" onclick="changeOnglet(this);">Reiter 7</li>
                   <li id="o_8" class="mon_onglet" onclick="changeOnglet(this);">Reiter 8</li>
                   <li id="o_9" class="mon_onglet" onclick="changeOnglet(this);">Reiter 9</li>
                   <li id="o_10" class="mon_onglet" onclick="changeOnglet(this);">Reiter 10</li>
                   <li id="o_11" class="mon_onglet" onclick="changeOnglet(this);">Reiter 11</li>
                   <div class="clear"><div id="mes_contenus">
               <div id="co_1" class="mon_contenu">Das ist der Text des ersten Fensters.</div>
               <div id="co_2" class="mon_contenu" style="display: none;">Das ist der Text des zweiten Fensters.</div>
               <div id="co_3" class="mon_contenu" style="display: none;">Das ist der Text des dritten Fensters.</div>
               <div id="co_4" class="mon_contenu" style="display: none;">Das ist der Text des vierten Fensters.</div>
               <div id="co_5" class="mon_contenu" style="display: none;">Das ist der Text des fünften Fensters.</div>
               <div id="co_6" class="mon_contenu" style="display: none;">Das ist der Text des sechsten Fensters.</div>
               <div id="co_7" class="mon_contenu" style="display: none;">Das ist der Text des siebenten Fensters.</div>
               <div id="co_8" class="mon_contenu" style="display: none;">Das ist der Text des achten Fensters.</div>
               <div id="co_9" class="mon_contenu" style="display: none;">Das ist der Text des neunten Fensters.</div>
               <div id="co_10" class="mon_contenu" style="display: none;">Das ist der Text des zehnten Fensters.</div>
               <div id="co_11" class="mon_contenu" style="display: none;">Das ist der Text des elften Fensters.</div>
           </div></div></ul></div>
Also die Codes aus dem Beitrag und die überarbeitete Version von Frank.

Nur leider sieht das ganze jetzt so aus:
Bild:
Und egal, welchen Reiter ich anklicke, der Inhalt ändert sich nicht, der Fokus bleibt also immer auf dem ersten Fenster.

Jetzt meine Frage, was kann man dagegen tun?
Die Ideen, die ich bisher hatte, sind:
1. Es liegt daran, dass es in einem Beitrag ist. Aber das müsste doch eigentlich gehen, die Beiträge können ja auch html.
2. Es liegt am CSS, das das Forum verwendet - da beißt sich irgendwas. Leider kenne ich mich damit nicht aus, das hat wer anders gemacht. Ich würde auch ungern nur zum Testen das ganze CSS löschen, da der gesamte Forenstyle darauf basiert.
3. Es liegt an phpBB2. Im anderen Beitrag steht nicht drin, was für das genutzt wird.

Kann mir da wer helfen? ^^"


Zuletzt von Sheep007 am Do 11 Jul 2013 - 13:37 bearbeitet, insgesamt 1 mal bearbeitet

Sheep007
Neuling
Neuling

Männlich Beiträge : 7
Anmeldedatum : 25.12.09

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Tabs - ChangeOnglet

Beitrag von #Frank am Mi 10 Jul 2013 - 19:19

Hast du auch das dazu notwendige Java Script eingesetzt?



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Tabs - ChangeOnglet

Beitrag von Sheep007 am Mi 10 Jul 2013 - 19:21

Javascript (aktiviert auf allen Seiten, Java generell aktiviert):
Code:
function changeOnglet(_this){
        var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
        for(var i = 0; i < getOnglets.length; i++){
            if(getOnglets[i].id){
                if(getOnglets[i].id == _this.id){
                    getOnglets[i].className = 'mon_onglet_selected';
                    document.getElementById('c' + _this.id).style.display            = 'block';
                }
                else{
                    getOnglets[i].className = 'mon_onglet';
                    document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
                }
            }
        }         
  }

Sagte ich doch, hab ich im Adminbereich eingesetzt und aktiviert, auf allen Seiten. Oder meinst du damit etwas anderes?

Sheep007
Neuling
Neuling

Männlich Beiträge : 7
Anmeldedatum : 25.12.09

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Tabs - ChangeOnglet

Beitrag von #Frank am Mi 10 Jul 2013 - 23:55

Ne, das meinte ich schon, aber in einem Beitrag wird das nicht Funktionieren. Dazu ist das eigentlich nicht gedacht.
Dieser Art von Funktionen sind nur für die Stellen gedacht, die auch im Tuto angegeben sind.
In Beiträgen Funktioniert das nicht.



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Tabs - ChangeOnglet

Beitrag von Sheep007 am Do 11 Jul 2013 - 13:37

Wieso man das in "Themen/Beiträge" dann trotzdem aktivieren kann, ist mir schleierhaft... Aber okay, danke sehr. Damit ist das geklärt (: Ich kann ja auch ne html-Seite basteln und die dann mit iframe einbinden oder so, wird schon klappen.

Kann geschlossen werden.

Sheep007
Neuling
Neuling

Männlich Beiträge : 7
Anmeldedatum : 25.12.09

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten