0

我想为菜单制作最简单的 CSS。有一个外部 div 和一个内部锚点。如果外部的类与内部的 id 相同，那将是活动样式。示例代码：

<div class='<?php echo $_GET['menu']; ?>'>
     <a href="index.php?menu=menu1" id='menu1'>Menu 1</a>
     <a href="index.php?menu=menu2" id='menu2'>Menu 2</a>
     <a href="index.php?menu=menu3" id='menu3'>Menu 3</a>
     <a href="index.php?menu=menu4" id='menu4'>Menu 4</a>
     <a href="index.php?menu=menu5" id='menu5'>Menu 5</a>
</div>

而且我不想写很多CSS，比如：

.menu1 #menu1, .menu2 #menu2, .menu3 ....
{ /*active stlye*/}

所以我想要以下内容：如果类名与它下的 id 相同，它将处于活动状态。

提前致谢。

4

3 回答 3

1

你不能用 CSS 做到这一点；也许您可以改用 PHP 来完成一些接近的事情：

<?php for($i=1;$i<=5;$i++){ ?>
<a href="index.php?menu=menu<?php echo $i;?>" <?php if($_GET['menu'] == 'menu'.$i) echo 'class="selected"'; ?>>Menu <?php echo $i;?></a>
<?php } ?>

和 CSS ：

        .selected{
/*active style*/
        }

编辑：使用 PHP 的解决方案比基于 JS 的解决方案更好，因为：每个人都会看到 .selected 类，即使是为其他人停用了 JS 的人，菜单也不会闪烁。老实说，看到通过 JS 更改的菜单 CSS 是非常烦人的。

于 2012-08-04T08:28:06.053 回答
0

那是不可能的。CSS 不是一种编程语言，您必须完全指定每个选择器。

但是由于您已经使用 PHP，如果您将类应用于您的锚标记之一会容易得多：

<div class='<?php echo $_GET['menu']; ?>'>
     <a href="index.php?menu=menu1" <?php echo $a_class[1]; ?> id='menu1'>Menu 1</a>
     <a href="index.php?menu=menu2" <?php echo $a_class[2]; ?> id='menu2'>Menu 2</a>
     <a href="index.php?menu=menu3" <?php echo $a_class[3]; ?> id='menu3'>Menu 3</a>
     <a href="index.php?menu=menu4" <?php echo $a_class[4]; ?> id='menu4'>Menu 4</a>
     <a href="index.php?menu=menu5" <?php echo $a_class[5]; ?> id='menu5'>Menu 5</a>
</div>

您必须指定一堆选择器或将代码添加到您的 PHP 脚本。

于 2012-08-04T08:21:56.593 回答
0

假设我让你很好。那么答案可能是：

<div id="menu">
<?php
    for($i = 0; $i < 5; $i++) {
        if(isset($_GET['menu']) && $i == $_GET['menu'])
            echo "  <a href=\"index.php?menu=$i\" id=\"menu$i\" class=\"menu_active\">Menu $i</a>";
        else
            echo "  <a href=\"index.php?menu=$i\" id=\"menu$i\">Menu $i</a>";
    }
?>
</div>

在你的 CSS

#menu a {
    /* Whatever you want for your normal links */
}

#menu .menu_active {
    /* Whatever you want for your active link */
}

就是这样！

于 2012-08-04T08:27:02.797 回答