Bezogen auf die drei <button>-Elemente, die ich gepostet habe, sollte das dazu gepostete JS alles sein, was Du benötigst.
Ich müsste das sonst heute Abend mal testen.
Bezogen auf die drei <button>-Elemente, die ich gepostet habe, sollte das dazu gepostete JS alles sein, was Du benötigst.
Ich müsste das sonst heute Abend mal testen.
Okay danke. naja dann ists so wie ich vorher geschrieben habe. Leider ohne Funktion der Tabs.. Danke schon mal für deine/eure Mühe hier mir zu helfen.
Du hast auch die <button> von mir 1:1 übernommen, ohne das onclick?
Ja mit hab ich 1:1 kopiert. Hab bei den verschiedenen Tabs dann bei class des City weggenommen. So sieht der Code für einen Tab jetzt aus:
<div id="tab2" class="w3-container ">
<table border="0" width="900">
<tr>
<td colspan ="2">
</td>
</tr>
<tr>
<th colspan="3" style="text-align:center" bgcolor="#f4f6f7">'.$lang_modal_auto_standard_doc_title.'</th>
</tr>
<tr>
');
// Hier für Fallunterscheidung ob spezifischer Milestone gewählt oder "all"
if($milestone=="all"){
echo '<td colspan="3" style="vertical-align:middle"><p title= "'.$lang_modal_auto_standard_doc_title_2.'">'.$line['automotive_standard_document_'.$peptype.'_'.$lang].'</p></td>';
}
else {
echo '<td colspan="3" style="vertical-align:middle"><p title= "'.$lang_modal_auto_standard_doc_title_2.'">'.$line[$peptype.'_standard_document_'.$milestone.'_'.$lang].'</p></td>';
}
printf('
</tr>
<tr>
');
printf('
</tr>
</table>
</div>
Also ich habe mein Beispiel mal getestet.
Da muss einfach nur in den Zeilen 16 und 17 das this gegen i ausgetauscht werden, mein Fehler.
Weiterhin muss die Zeile 2 ans Ende gestellt werden, da das Ereignis in Zeile 2 noch gar nicht definiert ist.
Mit den kleinen Änderungen funktioniert das bei mir.
Hättest Du aber auch drauf kommen können, wenn Du das Browser-Entwicklerwerkzeug verwendest!
Danke für deine Mühe. Habe die Änderungen übernommen:
<script>
var _buttons = document.querySelectorAll( 'button.tablink' );
_buttons.forEach( (i) => {
i.addEventListener('click', (e) => {
e.preventDefault();
_buttons.forEach( (t) => {
document.getElementById( t.dataset.tab ).style.display = 'none';
t.classList.remove('w3-green');
});
document.getElementById( i.dataset.tab ).style.display = 'block';
i.classList.add( 'w3-green' );
});
});
_buttons[0].click();
</script>
<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab1"><?php echo $lang_modal_button_tab_1; ?></button>
<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab2"><?php echo $lang_modal_button_tab_2; ?></button>
<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab3"><?php echo $lang_modal_button_tab_3; ?></button>
So stehts jetzt bei mir im Code. Ist das richtig? Oder war ich hier wieder zu dumm?
Bei mir werden alle 3 Tabinhalte angezeigt, die Buttons oben sind ohne Funktion -.-
Welche IDs haben denn Deine Content-Tabs?
Die werden sicher nicht gematcht, was Du aber in der Debugger-Konsole sehen könntest.
ich würde mal versuchen das Script nach den Buttons einzubinden. Wie soll das Script den Buttons finden die noch gar nicht da sind ?
Na ich hoffe mal, dass grundsätzlich das Load-Event genutzt wird?!
Falls nicht, JavaScript im Head-Bereich immer in so was hüllen:
Scripte in den Footer zu legen ist nur für bestimmte Erweiterungen/Tracker notwendig.
Habe das Script jetzt direkt unter die Buttons eingefügt:
?>
<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab1"><?php echo $lang_modal_button_tab_1; ?></button>
<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab2"><?php echo $lang_modal_button_tab_2; ?></button>
<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab3"><?php echo $lang_modal_button_tab_3; ?></button>
<script>
var _buttons = document.querySelectorAll( 'button.tablink' );
_buttons.forEach( (i) => {
i.addEventListener('click', (e) => {
e.preventDefault();
_buttons.forEach( (t) => {
document.getElementById( t.dataset.tab ).style.display = 'none';
t.classList.remove('w3-green');
});
document.getElementById( i.dataset.tab ).style.display = 'block';
i.classList.add( 'w3-green' );
});
});
_buttons[0].click();
</script>
<?php
print f('
<div id="tab1" class="w3-container">...
<div id="tab2" class="w3-container">..
<div id="tab3" class="w3-container">..
und darunter sind die 1. Zeilen der verschiedenen Tabs..
Genau das war gemeint: Das Script steht immer noch vor den Content-DIVs, kann diese also nicht matchen und somit nicht ausblenden.
Mir scheint der Kontextwechsel auch stark contra EVA zu sein. Warum gibst Du das Script als HTML aus und die <div>s per printf() über PHP?
Trenne HTML von PHP.
Naja die ganze Datei heißt result.php und über echo oder printf(' komm ich aus einer php Datei ja in html rein.
<div id="standard" class="w3-container">
<table border="0" width="900">
<tr>
<td colspan ="2">
</td>
</tr>
<tr>
<th colspan="3" style="text-align:center" bgcolor="#f4f6f7">'.$lang_modal_auto_standard_doc_title.'</th>
</tr>
<tr>
');
// Hier für Fallunterscheidung ob spezifischer Milestone gewählt oder "all"
if($milestone=="all"){
echo '<td colspan="3" style="vertical-align:middle"><p title= "'.$lang_modal_auto_standard_doc_title_2.'">'.$line['automotive_standard_document_'.$peptype.'_'.$lang].'</p></td>';
}
else {
echo '<td colspan="3" style="vertical-align:middle"><p title= "'.$lang_modal_auto_standard_doc_title_2.'">'.$line[$peptype.'_standard_document_'.$milestone.'_'.$lang].'</p></td>';
}
printf('
</tr>
<tr>
');
printf('
</tr>
</table>
</div>
ich muss da ja auch immer wieder auf Variablen aus PHP zugreifen.. das ist jetzt mal ein div, hab die ids jetzt mal geändert aber ändert sich nichts
Und das Script hab ich jetzt ganz unten eingebaut.
Ich sehe da kein id="tab1"!
Und Dein echo/printf-Salat macht keinen Sinn.
Das f bei printf() steht für format/formatted, was Du absolut gar nicht nutzt. Ein simples echo reicht stattdessen vollkommen.
Mal als kleines Beispiel, wie das nach EVA aussehen könnte:
<?php
$milestone_content = ( $milestone=="all" )
? $line['automotive_standard_document_'.$peptype.'_'.$lang]
: $line[$peptype.'_standard_document_'.$milestone.'_'.$lang];
echo <<<EOHTML
<div id="standard" class="w3-container">
<table border="0" width="900">
<tr>
<td colspan ="2"></td>
</tr>
<tr>
<th colspan="3" style="text-align:center" bgcolor="#f4f6f7">{$lang_modal_auto_standard_doc_title}</th>
</tr>
<tr>
<td colspan="3" style="vertical-align:middle"><p title= "{$lang_modal_auto_standard_doc_title_2}">{$milestone_content}</p></td>
</tr>
<tr>
</tr>
</table>
</div>
EOHTML;
Alles anzeigen
Jetzt darfst Du entscheiden, was für Dich übersichtlicher ist, von der Verarbeitung jedenfalls ist diese Variante sinnvoller.
Hatte die ID vorhin geändert, nachdem du mir den Tipp gegeben hast, dass es vl nicht gematched wird. Hab wieder alles zu tab1 tab2 tab3 geändert. Bringt aber auch nichts.
?>
<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab1"><?php echo $lang_modal_button_tab_1; ?></button>
<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab2"><?php echo $lang_modal_button_tab_2; ?></button>
<button class="tablink w3-bar-item w3-button w3-hover-gray" data-tab="tab3"><?php echo $lang_modal_button_tab_3; ?></button>
<?php
echo'
<div id="tab1" class="w3-container">
<table border="0">
<tr>
<td width ="700">
<table style="float:left;">
<tr>
<th width="900" style="text-align:center" bgcolor="#f4f6f7">'.$lang_modal_details.'</th>
</tr>
<tr>
<td style="vertical-align:middle"><p title="'.$lang_modal_first_approver_title.'">'.$lang_modal_first_approver.': '.$first_approver.'</p></td>
</tr>
<tr>
<td style="vertical-align:middle"><p title= "'.$lang_modal_second_approver_title.'">'.$lang_modal_second_approver.': '.$second_approver_wt_lang.'</p></td>
</tr>
<tr>
<td style="vertical-align:middle"><p title= "'.$lang_modal_second_approver_nwt_title.'">'.$lang_modal_second_approver_nwt.': '.$second_approver_nwt_lang.'</p></td>
</tr>
<tr>
<td style="vertical-align:middle"><p>'.$lang_modal_document_type.': '.$doc_type_eb.'</p></td>
</tr>
<tr>
<td style="vertical-align:middle"><p title="'.$lang_modal_document_contact_title.'">'.$lang_modal_document_contact.': <br> '.$doc_contact.'</p></td>
</tr>
<tr>
<td style="vertical-align:middle"><p>'.$lang_modal_content_origin.': '.$line['content_origin_'.$lang].'</p></td>
</tr>
</table>
</td>
<td width ="900">
<table style="float:left;">
<tr>
<th width ="900" style="text-align:center" bgcolor="#f4f6f7">'.$lang_modal_qa_question_title.'</th>
</tr>
<tr>
<td>'.addslashes($evidence_q_question).'</td>
</tr>
</table>
</td>
<td width ="900">
<table style="float:left;">
<tr>
<th width ="900" style="text-align:center" bgcolor="#f4f6f7">'.$lang_modal_tailoring_relevance_title.'</th>
</tr>
<tr>
<td>'.$line[$peptype.'_evidence_tailoring_relevance_'.$lang].'</td>
</tr>
</table>
</tr>
</table>
</div>';
und ganz unten endet die Datei dann so:
?>
<script>
var _buttons = document.querySelectorAll( 'button.tablink' );
_buttons.forEach( (i) => {
i.addEventListener('click', (e) => {
e.preventDefault();
_buttons.forEach( (t) => {
document.getElementById( t.dataset.tab ).style.display = 'none';
t.classList.remove('w3-green');
});
document.getElementById( i.dataset.tab ).style.display = 'block';
i.classList.add( 'w3-green' );
});
});
_buttons[0].click();
</script>
</body>
</html>
Dann machst Du irgendwas anderes falsch. Nur mal ohne den DIV-Content, aonst aber 1:1 übernommen:
https://codepen.io/anon/pen/dKaLdB?editors=1010
funktioniert einwandfrei...
Bei mir werden leider auch auf Codepen alle 3 Tabs direkt angezeigt. Hab das mal gescreenshottet. Die Tab Buttons sind auch hier ohne Funktion.
Schnucki... Hast Du einen Script-Blocker laufen?!
Puh, da frägst mich jetzt was. Bin ganz normal über Microsoft edge in der Arbeit drin. Wo finde ich das heraus?
Denn nimm mal einen anderen Browser. M$ hat glaube ich im Edge auch gern eigene Filter drin.
Auf der Arbeit kann es natürlich auch sein, dass die Administration da was sperrt.
Wäre aber ein schönes Beispiel, warum man sich auch heutzutage nicht auf JavaScript verlassen sollte!
Meine nicht Dich speziell damit, aber weil es oft Diskussionen gibt, dass manche meinen JavaScript würde überall laufen...
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.