0

上部と下部の共通情報が別々のインクルードファイルにあるphpテンプレートを設定しています。ホバーしたクラスが現在のページのときに各ページに表示されるようにするにはどうすればよいですか？（各ナビゲーションバー要素の効果は異なります。単語の左側にある小さなアイコンです。）ありがとうございます。

以下のコードを参照してください。

<nav>
         <div class="page">
          <a href="themes.php" class="themes">Themes</a>
            <a href="custom-gifts.php" class="custom-gifts">Custom Gifts</a>
            <a href="about-us.php" class="about-us">About Us</a>
            <a href="testimonials.php" class="testimonials">Testimonials</a>
            <a href="contact-us.php" class="contact-us">Contact Us</a>
         </div>
         </nav>

CSS：

nav {top:0px; text-align:right; margin:0px auto;}
nav a {margin: 12px 10px 10px 20px;}
a.themes {
    padding: 0px 0px 0px 24px;
    background: url(../images/themes-sprint.png) no-repeat left 0px;
    height:23px;
}
a.themes:hover { background-position: left -23px; }


a.custom-gifts {
    padding: 0px 0px 0px 30px;
    background: url(../images/custom-gifts-sprint.png) no-repeat left 0px;
}
a.custom-gifts:hover { background-position: left -22px; }

a.about-us {
    padding: 0px 0px 0px 30px;
    background: url(../images/about-us-sprint.png) no-repeat left 0px;
}
a.about-us:hover { background-position: left -22px; }

a.testimonials {
    padding: 0px 0px 0px 30px;
    background: url(../images/testimonials-sprint.png) no-repeat left 0px;
}
a.testimonials:hover { background-position: left -22px; }

a.contact-us {
    padding: 0px 0px 0px 30px;
    background: url(../images/contact-us-sprint.png) no-repeat left 0px;
}
a.contact-us:hover { background-position: left -22px; }

（ナビゲーションバーがリストなしで個別のスプリント画像を使用して設定されている理由は、サイトがレスポンシブになるように設計されているためです。モバイルバージョンでは、ナビゲーション部分が隣り合ってではなく上下に表示されます。）

4

1 に答える 1

0

私はあなたが正しいことを願っています。これを試して：

    <? $f=basename($_SERVER['PHP_SELF']); ?>

    <div class="page">
        <a href="themes.php" class="themes<?=($f=='themes.php'?' on':'')?>">Themes</a>
        <a href="custom-gifts.php" class="custom-gifts<?=($f=='themes.php'?' on':'')?>">Custom Gifts</a>
        <a href="about-us.php" class="about-us<?=($f=='about-us.php'?' on':'')?>">About Us</a>
        <a href="testimonials.php" class="testimonials<?=($f=='testimonials.php'?' on':'')?>">Testimonials</a>
        <a href="contact-us.php" class="contact-us<?=($f=='contact-us.php'?' on':'')?>">Contact Us</a>
    </div>

1行目は、現在のファイルの名前を変数にロードしています$f。次の行では、ファイル名をチェックし、それらが-tag の -Attribute内の$f出力と等しいかどうかを確認します。onclass<a>class="contact-us on"

CSS を追加する.onと、それができました。

于 2013-02-17T22:33:49.517 に答える