0

私の HTML ページでは、PHP インクルードを使用して、サイト全体のヘッダーを挿入します。

<?php include 'header.php'; ?>

header.php のコードは次のとおりです。

<div id="header">
    <div id="navigation">
            <ul>
                <li><a href="index.php" class="active">home</a></li>
                <li><a href="about_us.php" id="nav_about">about us</a></li>
                <li><a href="competition.php" id="nav_competition">competition</a></li>
                <li><a href="media.php" id="nav_media">media</a></li>
                <li><a href="sponsors.php" id="nav_sponsors">sponsors</a></li>
                <li><a href="contact_us.php" id="nav_contact">contact us</a></li>
            </ul>
        </div>  
</div>

HTML ドキュメントのヘッダーの CSS は次のとおりです。

#nav_about { color:#4c005c; }

挿入されたコードの「アクティブ」クラスは、そのリンクの色を変更して、現在のページを示すことです。「アクティブ」はhtmlファイルにリンクされたCSSドキュメントで定義されているため、これは正常に機能します。リンクが含まれているページに応じて特定のリンクの色を変更したいのですが、そのページの CSS (#nav_about を定義するもの) はテスト時に適用されません。ただし、インクルードは正常に機能します。

要約すると、PHP インクルードを介して挿入された HTML のサイト全体のスニペットを、それが挿入されたページの CSS で変更する方法を見つける必要があります。

HTMLとPHPは初めてなので、ここでの知識が不足していると思います。

4

3 に答える 3

2

PHP で現在表示しているページに基づいて HTML 要素のクラスを変更する簡単な方法は、次のようになります。

<?php
$nav_links = array(
    '/index.php' => array('id' => 'nav_home', 'label' => 'Home'),
    '/about_us.php' => array('id' => 'nav_about', 'label' => 'About Us'),
    // and so on for each link
);
?>
<div id="header">
    <div id="navigation">
        <ul>
<?php
foreach ($nav_links as $href => $link_info) {
    if ($_SERVER['REQUEST_URI'] === $href) {
?>
            <li><a href="<?php echo $href; ?>" id="<?php echo $link_info['id']; ?>" class="active"><?php echo $link_info['label']; ?></a></li>
<?php
    } else {
?>
            <li><a href="<?php echo $href; ?>" id="<?php echo $link_info['id']; ?>"><?php echo $link_info['label']; ?></a></li>
<?php
    }
}
?>
        </ul>
    </div>  
</div>

activeここでは、現在表示されているページに対応するリンクにclass= を適用するだけです。これにより、必要に応じてページ/リンク構成を簡単に分離することもできます.

于 2012-11-27T01:25:13.567 に答える
1

セレクターの特異性の問題のように聞こえます。ナビゲーションリンクのCSSは何ですか？

のようなものであれば、セレクター#navigation li {color: #abc}よりも優先されます。#nav_about

セレクターの特異性は、それぞれのID、クラス、および要素の数によってランク付けされます。

1 id+1要素>1id。

#nav_aboutセレクター の特異性を高めて（たとえば、に変更して#navigation #nav_about）、問題がないはずです。

于 2012-11-27T01:13:46.287 に答える
0

PHPタグ内で、従来の方法を使用してみてください。

<?php
  echo "<link rel='stylesheet' href='css-filename.css' type='text/css'>";
 ?>
于 2012-11-27T01:21:14.580 に答える