使用 php 在 html 中编写动态悬停选项卡

Writing a dynamic Hover tabs in html using php

我正在关注 link: Hover Tabs 。我正在阅读文件内容,希望将其作为 id 相应地打印 tabcontent。

我的文件:NamingClass.txt 包含:

Bicycle
MountainBike
Test

我的 php 代码包含:

<div class="tab">
    <?php
    $filename="NamingClass.txt";
    $Content=file($filename);
    $NoOfLine=count(file($filename));
    for($i=0;$i<$NoOfLine;$i++)
    {
            $cont=$Content[$i];
            $jid="'$cont'";
            echo '<button class="tablinks" onmouseover="openCity(event, '.$jid.')">'.$cont.'</button>';
    }
        echo '</div>';
        for($i=0;$i<$NoOfLine;$i++)
        {
                $cont=$Content[$i];
                echo '<div id="'.$cont.'" class="tabcontent">
                  <h3>'.$cont.'</h3>
                  <p> Content1 code.....</p>
                </div>';
        }
?>

但 tabcontent 值未打印。我认为我在这里犯的错误是 $jid 因为在原始代码中

<button class="tablinks" onmouseover="openCity(event, 'London')">London</button>

为了在php echo 中打印'London',我使用了$jid="'$cont'";

echo '<button class="tablinks" onmouseover="openCity(event, '.$jid.')">'.$cont.'</button>';

我已经尝试了所有的可能性,但它没有打印 tabcontent 请提出一些建议。

分配$NoOfLine时,使用count($Content);,而不是count(file($filename));此外,两个循环似乎都在做同样的事情,所以我将它们组合起来,然后在那个 for() 循环中回显你的第一个代码块,并在第一个 for() 循环中构建你的第二个回显,然后回显建立的数据在 for() 循环完成后,file() 也不会删除 EOL(s) 所以我会在你喝完时使用 array_map 和 trim||rtrim()你的文件()。我还认为,当您已经在“$Content[$i]”中拥有变量时,重写/复制变量是一种浪费...

示例...

$filename = "NamingClass.txt";

$Content  = array_map ( 'rtrim', file ( $filename ) );

$NoOfLine = count ( $Content );

$secondL  = '';

for ( $i = 0; $i < $NoOfLine; $i += 1 )
{
    echo '<button class="tablinks" onmouseover="openCity(event, \'' . $Content[$i] . '\')">' . $Content[$i] . '</button>';

    $secondL .= '<div id="' . $Content[$i] . '" class="tabcontent">
              <h3>' . $Content[$i] . '</h3>
              <p> Content1 code.....</p>
            </div>';
}

echo '</div>';

echo $secondL;