Question

我想为菜单制作最简单的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*/}

所以我想要以下内容：如果classname与它下面的id相同，那么它将是活动的。

提前致谢。

Answer 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改变是非常烦人的。

Answer 2

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

但是既然您已经使用过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脚本添加代码。

Answer 3

让我们假设我帮到你。然后答案可能是：

<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 */
}

就是这样！

课堂上的CSS id

3 个答案: