Hallo zusammen,
ich arbeite an einer Internetseite die aus einer SQL Datenbank eine Ergebnisliste (sieht aus wie Tabelle) dynamisch je nach Nutzereingabe erzeugt.
Auf die einzelnen Ergebnisse kann man klicken, und dadurch öffnet sich ein Modal. Da in diesem Modal immer mehr Einträge dazu kommen und es langsam unübersichtlich wird, wollte ich Tabs in das Modal einbauen. Hierzu habe ich ein Javascript, dass die 3 Tabs anzeigen und ausblenden soll. Jedoch werden im Modal immer direkt alle Tabs angezeigt und meine Buttons oben sind ohne Funktion.
Hier mal die relevanten Codeteile:
?>
<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.'">'.$la ng_modal_first_approver.': '.$first_approver.'</p></td>
</tr>
<tr>
<td style="vertical-align:middle"><p title= "'.$lang_modal_second_approver_title.'">'.$lan g_mo dal_second_approver.': '.$second_approver_wt_lang.'</p></td>
</tr>
<tr>
<td style="vertical-align:middle"><p title= "'.$lang_modal_second_approver_nwt_title.'">'. $lan g_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_relevanc e_title.'</th>
</tr>
<tr>
<td>'.$line[$peptype.'_evidence_tailoring_relevance_'.$lang].'</td>
</tr>
</table>
</tr>
</table>
</div>';
dann folgen die 2 weiteren divs..
am ende habe ich folgendes Script eingebaut:
?>
<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>
Ich bin kompletter Neuling, und komme leider nicht darauf. Auf w3schools hatte ich auch einen Code gefunden, jedoch funktioniert der immer nur bei dem ersten Ergebnis aus der dynamisch erzeugten Ergebnisliste. Deswegen habe ich etwas neues probiert. Hoffentlich könnt ihr mir helfen. Vielen Dank
Habe mittlerweile festgestellt, dass es irgendwie Browser abhängig ist. Mit der Nutzung von Microsoft Edge funktioniert das Skript gar nicht und alles wird angezeigt. Mit Mozilla Firefox funktioniert es nur bei dem ersten Eintrag in der Liste, sobald ich einen neuen Eintrag anklicken um das Modal zu öffnen wird auch alles angezeigt..
ich arbeite an einer Internetseite die aus einer SQL Datenbank eine Ergebnisliste (sieht aus wie Tabelle) dynamisch je nach Nutzereingabe erzeugt.
Auf die einzelnen Ergebnisse kann man klicken, und dadurch öffnet sich ein Modal. Da in diesem Modal immer mehr Einträge dazu kommen und es langsam unübersichtlich wird, wollte ich Tabs in das Modal einbauen. Hierzu habe ich ein Javascript, dass die 3 Tabs anzeigen und ausblenden soll. Jedoch werden im Modal immer direkt alle Tabs angezeigt und meine Buttons oben sind ohne Funktion.
Hier mal die relevanten Codeteile:
?>
<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.'">'.$la ng_modal_first_approver.': '.$first_approver.'</p></td>
</tr>
<tr>
<td style="vertical-align:middle"><p title= "'.$lang_modal_second_approver_title.'">'.$lan g_mo dal_second_approver.': '.$second_approver_wt_lang.'</p></td>
</tr>
<tr>
<td style="vertical-align:middle"><p title= "'.$lang_modal_second_approver_nwt_title.'">'. $lan g_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_relevanc e_title.'</th>
</tr>
<tr>
<td>'.$line[$peptype.'_evidence_tailoring_relevance_'.$lang].'</td>
</tr>
</table>
</tr>
</table>
</div>';
dann folgen die 2 weiteren divs..
am ende habe ich folgendes Script eingebaut:
?>
<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>
Ich bin kompletter Neuling, und komme leider nicht darauf. Auf w3schools hatte ich auch einen Code gefunden, jedoch funktioniert der immer nur bei dem ersten Ergebnis aus der dynamisch erzeugten Ergebnisliste. Deswegen habe ich etwas neues probiert. Hoffentlich könnt ihr mir helfen. Vielen Dank
Habe mittlerweile festgestellt, dass es irgendwie Browser abhängig ist. Mit der Nutzung von Microsoft Edge funktioniert das Skript gar nicht und alles wird angezeigt. Mit Mozilla Firefox funktioniert es nur bei dem ersten Eintrag in der Liste, sobald ich einen neuen Eintrag anklicken um das Modal zu öffnen wird auch alles angezeigt..
Kommentar