Блог

Привет, ребята, мне действительно нужна ваша помощь.

Я очень новичок в php или программировании в целом. Так что, возможно, мой вопрос уже решен, но я не смог корректно настроить код или увидеть правильное решение. У меня следующая проблема: мне нужна процедура, которая может обрабатывать гибкое количество вкладок. Например, если у меня есть 5 ключевых слов, должно быть создано 5 вкладок. Для 3 ключевых слов 3 вкладки и так далее…

Я знаю, как обрабатывать вкладки, их количество известно и не меняется (например, всегда три вкладки с «home», «news» и «registration»). Но в моем случае количество вкладок меняется со временем.

Я попробовал этот код:

Моя часть php:

 <?php

/* How it was handled before I tried to make it dynamically:
<button class="tablink" onclick="openPage('Home', this, 'red')" id="defaultOpen">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p> home... </p>
</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p> news... </p>
</div>

<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p> contact... </p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p> about... </p>
</div> 


My try making the number of tabs dynamically:
*/

$current_tab_number = 0; //Number of tabs generated
$end_number=3; //this should be the number of tabs at the end

while($current_tab_number < $end_number){
    $current_tab_number = current_tab_number   1;
?>
    <button class="tablink" onclick="openPage('$current_tab_number', this, 'red')">Name</button>
    <div id="$current_tab_number" class="tabcontent">
        <h3>Name</h3>
        <p> Some text...</p>
    </div>
<?php
}
 

Это мой javascript:

 <!-- Javascript part -->
<script>    
    
function openPage(pageName, elmnt, color) {
    // Hide all elements with class="tabcontent" by default */
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i  ) {
        tabcontent[i].style.display = "none";
    }
    // Remove the background color of all tablinks/buttons
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i  ) {
        tablinks[i].style.backgroundColor = "";
    }
    // Show the specific tab content
    document.getElementById(pageName).style.display = "block";
    // Add the specific color to the button used to open the tab content
    elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click(); 
    
</script>       
 

Как вы можете видеть, я изменил только часть php. Но поскольку я новичок, код работает не так, как ожидалось, и я действительно понятия не имею, как правильно настроить.

Кроме того, было бы фантастично, если бы вкладки тоже можно было называть гибкими. Например, ‘tab 1’, ‘tab 2’,…

Я действительно надеюсь, что кто-нибудь может мне помочь.

Пока что, хорошего дня!

Ключевая проблема

Причина, по которой ваш код не работает, заключается в том, что вы пропустили $ символ в строке:

 $current_tab_number = current_tab_number   1;
 

Таким образом, фактически ваш while цикл становится бесконечным, поскольку вы не увеличиваете $current_tab_number переменную.

Замените эту строку на:

 $current_tab_number = current_tab_number   1;
// OR
$current_tab_number  ;
 

Который затем становится:

 while($current_tab_number < $end_number){
    $current_tab_number  ;
    // Print tabs here
}
 

В качестве альтернативы вы могли бы использовать цикл for, например:

 for($i = 0; $i < $end_number; $i  ){
    // print tabs here
}
 

Дополнительно

Использование переменных вне тегов PHP

Эта строка:

 <button class="tablink" onclick="openPage('$current_tab_number', this, 'red')">Name</button>
 

Буквально напечатает строку $current_tab_number , какой она должна быть:

 <button class="tablink" onclick="openPage('<?php echo $current_tab_number; ?>', this, 'red')">Name</button>
 

То же самое здесь:

 <div id="$current_tab_number" class="tabcontent">

<div id="<?php echo $current_tab_number; ?>" class="tabcontent">
 

Мы могли бы легко обойти это, просто используя echo для печати html вместо. Например:

 echo <<<EOT

    <button class="tablink" onclick="openPage('{$current_tab_number}', this, 'red')">Name</button>
    <div id="{$current_tab_number}" class="tabcontent">
        <h3>Name</h3>
        <p> Some text...</p>
    </div>

EOT;
 

Этот метод не добавляет данные в divs

Ожидается, что результат этого кода будет:

 <button class="tablink" onclick="openPage('Home', this, 'red')" id="defaultOpen">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')">News</button>
<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p> home... </p>
</div>
<div id="News" class="tabcontent">
  <h3>News</h3>
  <p> news... </p>
</div>
 

Но на самом деле будет:

 <button class="tablink" onclick="openPage('<?php echo $current_tab_number; ?>', this, 'red')">Name</button>
<div id="<?php echo $current_tab_number; ?>" class="tabcontent">
    <h3>Name</h3>
    <p> Some text...</p>
</div>
<button class="tablink" onclick="openPage('<?php echo $current_tab_number; ?>', this, 'red')">Name</button>
<div id="<?php echo $current_tab_number; ?>" class="tabcontent">
    <h3>Name</h3>
    <p> Some text...</p>
</div>
 

Чтобы добавить данные в выходные данные, нам нужно откуда-то их получить, например:

 $tab_list = [
    1 => [
        "name"    => "Home",
        "content" => "Some text for content..."
    ],
    2 => [
        "name"    => "About",
        "content" => "Some text for about..."
    ]
];

foreach($tab_list as $tab_number => $tab){
    echo "
    <button class="tablink" onclick="openPage('{$tab_number}', this, 'red')">Name</button>
    <div id="{$tab_number}" class="tabcontent">
        <h3>{$tab["name"]}</h3>
        <p>{$tab["content"]}</p>
    </div>
    ";
}
 

Вам нужно знать имя для каждой вкладки и сколько их нужно создать, поэтому создайте массив с нужными вам именами, в котором указано, сколько их необходимо, и имя, которое следует использовать при вызове javascript.

 /*
My try making the number of tabs dynamically:
*/

$tabs = ['Home', 'News', 'Contact', 'About'];

foreach ($tabs as $tab){
?>
    <button class="tablink" onclick="openPage('<?php echo $tab;?>', this, 'red')>Name</button>
    <div id="<?php echo $tab;?>" class="tabcontent">
        <h3>Name</h3>
        <p> Some text...</p>
    </div>
<?php
} // endforeach
 

Вы можете перебирать имена вкладок и объединять строки, чтобы сгенерировать HTML-код для вкладок. Например:

 $tab_names = ['home', 'about', 'contact'];
$resulting_html_code = "";
foreach ($tab_names as $tab){
    $resulting_html_code .= "{$resulting_html_code} <div class='tab'>{$tab}</div>";
}