HTMLのリストを取得するためのCSSのスタイルPHPコード

私はCSSでスタイリングのPHPに関する質問があります。下のコードでは、ページ上部のナビゲーションバーに、選択したページが表示されます。下のコードではレイアウトを好む方法ですが、PHPコードでは動作しません。それはatmで動作していますが、リンクカラーのテキストに過ぎません。私はそれがforeachループにあるので、2番目のコードのようなリストを作ることはできません。HTMLのリストを取得するためのCSSのスタイルPHPコード

どうすればいいのですか？

ありがとうございます！

<head> 
<title>Website</title> 
<style> 
    body {margin:0;} 

    ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
     position: fixed; 
     top: 0; 
     width: 100%; 
    } 

    li { 
     float: left; 
    } 

    li a { 
     display: block; 
     color: white; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
    } 

    li a:hover:not(.active) { 
     background-color: #111; 
    } 

    .active { 
     background-color: #4CAF50; 
    } 
</style> 


</head> 
<body> 

<?php 

// This is your menu 
$items = array("pagina1", "pagina2", "pagina3", "pagina4"); 
foreach ($items as $item) 
{ 
if (isset($_GET['page']) && $_GET['page'] == $item) 
{ 
    echo '<a href="?page=' . $item . '" class="active"> ' . $item . '</a>'; 
    $activePage = $item . ".php"; 
} 
else 
{ 
    echo '<a href="?page=' . $item . '"> ' . $item . '</a>'; 
} 
} 

// Include your page 
if (isset($activePage)) 
{ 
include $activePage; 
} 
else 
{ 
include "pagina1.php"; 
} 

?> 

</body>

<head> 
<style> 
body {margin:0;} 

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
position: fixed; 
top: 0; 
width: 100%; 
} 

li 
float: left; 
} 

li a { 
display: block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

li a:hover:not(.active) { 
    background-color: #111; 
} 

.active { 
background-color: #4CAF50; 
} 
</style> 
</head> 
<body> 

<ul> 
<li><a class="active" href="#home">Home</a></li> 
<li><a href="#news">News</a></li> 
<li><a href="#contact">Contact</a></li> 
<li><a href="#about">About</a></li> 
</ul> 

<div style="padding:20px;margin-top:30px;background-  color:#1abc9c;height:1500px;"> 
<h1>Fixed Top Navigation Bar</h1> 
<h2>Scroll this page to see the effect</h2> 
<h2>The navigation bar will stay at the top of the page while scrolling</h2> 

<p>Some text some text some text some text..</p> 
<p>Some text some text some text some text..</p> 
<p>Some text some text some text some text..</p> 
</div> 

</body>

出典

2017-01-18 ProgrammerKid

タグ付きのPHPページを別のページのタグに含めるとしていますか？私はこれがエラーを引き起こす可能性があると思う....それを忘れて、私はあなたの目標を理解していない.. – Oliver

あなたは、ULとのliタグを追加しませんでした。

echo '<ul>'; 
foreach ($items as $item) 
    { 
echo '<li>'; 
    if (isset($_GET['page']) && $_GET['page'] == $item) 
    { 
     echo '<a href="?page=' . $item . '" class="active"> ' . $item . '</a>'; 
     $activePage = $item . ".php"; 
    } 
    else 
    { 
     echo '<a href="?page=' . $item . '"> ' . $item . '</a>'; 
    } 
echo '</li>'; 
    } 
    echo '</ul>';

出典

2017-01-18 17:20:58

Thandあなたはとても。私はそれらをすでに追加しましたが、エコーはありません。今それは働いている！ – ProgrammerKid

ul構造を追加していません。あなたはforeachループを開始する前に

<ul> 

<?php 

    // This is your menu 
    $items = array("pagina1", "pagina2", "pagina3", "pagina4"); 
    foreach ($items as $item) 
    { 
     if (isset($_GET['page']) && $_GET['page'] == $item) 
     { 
      echo '<li><a href="?page=' . $item . '" class="active"> ' . $item . '</a></li>'; 
      $activePage = $item . ".php"; 
     } 
     else 
     { 
      echo '<li><a href="?page=' . $item . '"> ' . $item . '</a></li>'; 
     } 
    } 

?> 

</ul>

出典

2017-01-18 17:20:59

、echo "<ul>";を追加します。

ループ内のechoを<li>で始まり、</li>で終わるように変更します。

最後に、foreachループの後に、echo "</ul>";を追加します。

出典

2017-01-18 17:21:32

これで動作していますが、ページを開くと、アクティブなボタンはもう別の色になりません。ページを切り替えると元のページに戻りますが、ページを開くと表示されません。 – ProgrammerKid

@ProgrammerKidページが最初に開くときにhtmlを調べると、リンクの1つに 'active'クラスが表示されますか？ –

いいえ、最初は現在のページがないので、ifをスキップします。そのようなことをどうすればいいのかという疑問が増えた – ProgrammerKid

HTMLのリストを取得するためのCSSのスタイルPHPコード

答えて

関連する問題