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; }

（导航栏设置为没有列表和单独的 sprint 图像的原因是因为我将网站设计为响应式的，并且在移动版本中，导航部分显示在另一个之上而不是彼此相邻。）

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>

第一行是将当前文件的名称加载到变量$f中。在以下几行中，我们检查文件名，以及它们是否在 -tag的-Attribute 中$f输出相等，例如.onclass<a>class="contact-us on"

现在添加一个 CSS.on就可以了。

于 2013-02-17T22:33:49.517 回答