0
ソリューション：
私のコードの抜粋は、明確な解決策として下記に記載されています。CSSのIDにクラスを追加する
<?php
$active_home = "active";
include('header.php');
?>
<div id="content">
<title>Welcome to the home page.</title>
<p>index</p>
</div>
ヘッダーファイルに影響を与えるには、$ active_homeがインクルードの前に来る必要があります。
<html>
<head>
<link rel="stylesheet" href="MainStyle.css" type="text/css" media="screen"/>
</head>
<div class="topnav" id="mytopnav">
<a href="/Index.php" id="homenav" class="<?php echo $active_home; ?>">Home</a>
</div>
</html>
現在、私は私のナビゲーションバーのすべてのスタイルを指定するCSSメインシートを、持っています。
ユーザーがどのページを表示しているかについての情報を提供したいと考えています。the tutorial I followedは、背景とテキストの色を変更する ".active"クラスを使用しています。
問題は、それらのメソッドのアクティブページがnavbarで指定されていることです。これは、navbarがアクティブなページであると見なすものが決して変化しないので、機能しません。
私がしようとしているのは、各ページの先頭に小さなスタイルシートを追加して、ナビゲーションバーの現在のページをアクティブに設定することです。私は上記の例では、各ページにホームページを
<style>
#homenav{
background-color: #4CAF50;
}
</style>
のようなものを使用している場合
は、私は非常に簡単にこれを行うことができます。
しかし、これは、アクティブなページのスタイルを更新する場合、各ページを個別に変更する必要があることを意味します。私はむしろ何かを実行したい
は、しかし、現時点では私は参照の問題が生じています、人生が容易になり
<style>
#homenav{
(add the .active class)
}
</style>
のようなものです。
CSSで特定のIDにクラスを追加することはできますか？それに失敗すると、他のスタイルシートで参照できるメインCSSの変数を宣言する方法がありますか？
メインCSS：
* {
margin: 0;
}
#body{
margin: 0px;
padding: 0px;
font-family: Calibri;
}
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
あなたは '＃homenav'と' .active'を '＃homenav.active {// home nav idとactive class}'のような単一のセレクタに組み合わせていますか？ –
すべてのページが動的か、ページ数に制限されていますか？私が提案したい解決策はそれによって変わるかもしれません。 –
@MichaelCoker私は、homenav要素に.activeクラスのプロパティを適用したいと思います。 – Potatosaurus